欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)

 更新時(shí)間:2016年06月27日 16:14:22   作者:菜鳥(niǎo)羋弄  
這篇文章主要介紹了BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

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ì)在一直跑滴。

相關(guān)文章

最新評(píng)論