简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:1170 次  日期:2016-07-12 14:45:12

温馨提示:易贤网小编为您整理了“BootStrap初学者对弹出框和进度条的使用感觉”,方便广大网友查阅!

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

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>

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

<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>

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

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:如何在Linux上安装Node.js
下一篇:Jquery和BigFileUpload实现大文件上传及进度条显示
易贤网手机网站地址:BootStrap初学者对弹出框和进度条的使用感觉
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!