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


Posted in Javascript onJune 27, 2016

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,不然会在一直跑滴。

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 #Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
You might like
PHP新手上路(六)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
浅谈PHP的反射机制
2016/12/15 PHP
表单提交验证类
2006/07/14 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python实现栈的方法
2015/05/26 Python
Python 多线程Threading初学教程
2017/08/22 Python
python抽取指定url页面的title方法
2018/05/11 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
争先创优活动总结
2014/08/27 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP