BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)
Bootstrap,來(lái)自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開(kāi)發(fā)更加快捷。
bootstrap 框架提供的進(jìn)度條,如菜鳥(niǎo)教程里面的這些代碼
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div> </div>
讓我這種真正的菜鳥(niǎo)一開(kāi)始不知道該如何....讓其變?yōu)檎嬲倪M(jìn)度條。不過(guò)進(jìn)過(guò)百度幾下別人的之后,只要這個(gè)是要添加jquery代碼配合之下才能實(shí)現(xiàn)滴。我度呀度,終于實(shí)現(xiàn)如下,略帶高興。
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="width:300px"> <div class="modal-dialog"> <div class="modal-content" > <span style="text-align:center;color:red">文件正在上傳請(qǐng)勿刷新頁(yè)面!</span><br /> <div class="progress progress-striped active"> <div class="bar"> </div> </div> </div> </div> </div>
上面這段是,用彈出框里面包含進(jìn)度條。不然怎么實(shí)現(xiàn)一個(gè)開(kāi)始讓其隱藏的呢?在用bootstrap 做進(jìn)度條,或者固定的彈出框時(shí),加上data-backdrop="static" 這句比較好,因?yàn)闆](méi)有這個(gè)修飾,你只要點(diǎn)擊下鼠標(biāo),彈出框就消失不見(jiàn)了。
<scripts> var p = 101; var stop = 1; function run() { p += 4; $("div[class=bar]").css("width", p + "%"); var timer = setTimeout("run()", 500); if (p >100&&stop<1) { p = 0; } } $('#BtnSubmit').click(function () { $('#myModal1').modal('show'); p = 0; stop = 0; run(); $('#UpLoad').submit(); }); </scripts>
其實(shí),bootstrap的進(jìn)度條是通過(guò)css樣式進(jìn)行展現(xiàn)的,所以只要不斷滴修改,style width的值,就可以顯示出來(lái)。當(dāng)然我這個(gè)循環(huán),重現(xiàn)刷新頁(yè)面才能重新隱藏掉進(jìn)度條。若是,用post提交,然后根據(jù)返回值進(jìn)行判斷,然后用$('#myModal1').modal('hide');將其隱藏,stop的值相應(yīng)滴就改為1,不然會(huì)在一直跑滴。
- Bootstrap每天必學(xué)之進(jìn)度條
- BootStrap Progressbar 實(shí)現(xiàn)大文件上傳的進(jìn)度條的實(shí)例代碼
- bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
- BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
- Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
- bootstrap多種樣式進(jìn)度條展示
- BootStrap組件之進(jìn)度條的基本用法
- Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解
- Bootstrap進(jìn)度條實(shí)現(xiàn)代碼解析
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫(huà)和進(jìn)度條插件
- bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能示例
相關(guān)文章
js 按照指定間隔 向字符串中插入隨機(jī)字符串的實(shí)現(xiàn)代碼
看到論壇有人問(wèn),覺(jué)得有意思,就試著寫(xiě)了一下。2010-03-03js中的異步獲取到的數(shù)據(jù)到底能不能賦值給一個(gè)全局變量問(wèn)題
這篇文章主要介紹了js中的異步獲取到的數(shù)據(jù)到底能不能賦值給一個(gè)全局變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04JS動(dòng)態(tài)加載腳本并執(zhí)行回調(diào)操作
這篇文章主要為大家詳細(xì)介紹了JS動(dòng)態(tài)加載腳本并下載完成后執(zhí)行回調(diào)操作,感興趣的小伙伴們可以參考一下2016-08-08uni-app開(kāi)發(fā)案例之video視頻組件
最近uni-app使用video組件碰到的一系列問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于uni-app開(kāi)發(fā)案例之video視頻組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤(pán)輸入數(shù)字,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能
這篇文章主要介紹了JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能,實(shí)現(xiàn)此功能大概有兩步,第一步用戶(hù)選擇需要上傳的圖片,第二步獲取圖片資源壓縮預(yù)覽上傳,具體實(shí)現(xiàn)代碼大家參考下本文2018-03-03