BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。
bootstrap 框架提供的進(jìn)度條，如菜鳥教程里面的這些代碼
<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(jìn)度條。不過進(jìn)過百度幾下別人的之后，只要這個(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)勿刷新頁面！</span><br /> <div class="progress progress-striped active"> <div class="bar"> </div> </div> </div> </div> </div>
上面這段是，用彈出框里面包含進(jìn)度條。不然怎么實(shí)現(xiàn)一個(gè)開始讓其隱藏的呢？在用bootstrap 做進(jìn)度條，或者固定的彈出框時(shí)，加上data-backdrop="static" 這句比較好，因?yàn)闆]有這個(gè)修飾，你只要點(diǎn)擊下鼠標(biāo)，彈出框就消失不見了。
<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)度條是通過css樣式進(jìn)行展現(xiàn)的，所以只要不斷滴修改，style width的值，就可以顯示出來。當(dāng)然我這個(gè)循環(huán)，重現(xiàn)刷新頁面才能重新隱藏掉進(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)畫和進(jìn)度條插件
- bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript canvas檢測(cè)小球碰撞，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域2013-08-08
js定時(shí)器(執(zhí)行一次、重復(fù)執(zhí)行)
這篇文章主要分享一段js代碼，有關(guān)js定時(shí)器的小例子，分為執(zhí)行一次的定時(shí)器與重復(fù)執(zhí)行的定時(shí)器,需要的朋友可以參考下2014-03-03
JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
javascript 翻頁測(cè)試頁(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁)
javascript 翻頁測(cè)試頁(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁)，需要的朋友可以參考下。2009-12-12
uniapp中uni.request(OBJECT)接口請(qǐng)求封裝實(shí)例代碼
在開發(fā)的時(shí)候經(jīng)常會(huì)用到前端請(qǐng)求后端接口,每次的請(qǐng)求都會(huì)出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中uni.request(OBJECT)接口請(qǐng)求封裝的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了JS表的模擬方法,涉及javascript模擬表的生成、添加與刪除節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
百度地圖去掉marker覆蓋物或者去掉maker的label文字方法
下面小編就為大家分享一篇百度地圖去掉marker覆蓋物或者去掉maker的label文字方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
div+css+js模擬tab切換效果 事件綁定 IE,firefox兼容
div+css+js模擬tab,這個(gè)版本,理論上可以添加無限個(gè)tab,而且,你只要管內(nèi)容的添加行了,不需要改JS2009-12-12