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