初学者对bootstrap感觉,弹出框和进度条的使用

        鄙人刚接触bootstrap不久,感觉其用起来不是很爽。终其原因,是我接触前端开发比较少。以前用惯了easyui,突然用了这个不是很适应。特别是在局部刷新那方面,提交之后,不知该如何修改大片大片div....这些暂且不说。此乃,鄙人手篇博文,突然发现,写博客也是一门技术...好难凑内容!

 bootstrap 框架提供的进度条,如菜鸟教程里面的这些代码

40% 完成
     让我这种真正的菜鸟一开始不知道该如何....让其变为真正的进度条。不过进过百度几下别人的之后,只要这个是要添加jquery代码配合之下才能实现滴。我度呀度,终于实现如下,略带高兴。


上面这段是,用弹出框里面包含进度条。不然怎么实现一个开始让其隐藏的呢?在用bootstrap 做进度条,或者固定的弹出框时,加上 data-backdrop="static" 这句比较好,因为没有这个修饰,你只要点击下鼠标,弹出框就消失不见了。


   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();
           
       });
其实,bootstrap的进度条是通过css样式进行展现的,所以只要不断滴修改,style width的值,就可以显示出来。当然我这个循环,重现刷新页面才能重新隐藏掉进度条。若是,用post提交,然后根据返回值进行判断,然后用 $('#myModal1').modal('hide');将其隐藏,stop的值相应滴就改为1,不然会在一直跑滴。








你可能感兴趣的:(初学者对bootstrap感觉,弹出框和进度条的使用)