jquery ui(四)进度条 progressbar
来源:互联网 发布:大数据挖掘 编辑:程序博客网 时间:2024/06/15 09:04
进度条可以向用户显示程序当前完成的百分比,让用户知道程序的进度,提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能,就是progressbar.
一、 老规矩,先上一个简单的例子
1、代码如下:
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript">
$(function(){
$( "#progressbar1" ).progressbar({value:7 });
});
</script>
<div id="progressbar1">
<div class="progress-label">ifxoxo.com..7%</div>
</div>
2、 效果图如下:
二、具体用法
1、需要加载的js文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
2、页面上的html代码
需要一个用来装progressbar的空容器
3、js代码
(1)options
它有三个参数可以使用
参数 默认值 作用 value 0 进度条显示的度数(0到100) max 100 进度条的最大值 disable false 是否隐藏(2)事件
- create: 加载progressbar的时候此事件将被触发
- change: 进度条有改变的时候此事件将被触发
- complete: 加载到100的时候此事件将被触发
4、一个会动的进度条的实例
(1)代码如下
<head>
<meta charset="utf-8"/>
<title>jQuery UI Progressbar - Custom Label</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
//为了让样式清晰一点
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function(){
var pro = $("#progressbar" ); //进度条div
var proLabel = $(".progress-label" );//进度条里面文字
pro.progressbar({
value: false, //初始化的值为0
change: function(){
//当value值改变时,同时修改label的字
proLabel.text( pro.progressbar("value" ) +"%" );
},
complete: function(){
//当进度条完成时,显示complate
proLabel.text( "Complete!" );
}
});
//延迟500毫秒调用修改value的函数
setTimeout( addValue, 500);
//动态修改value的函数
function addValue(){
var pro = $("#progressbar" );
var newValue = pro.progressbar("value")+1;
pro.progressbar("value",newValue);//设置新值
if( newValue >= 100) {return;} //超过100时,返回
setTimeout( addValue, 500); //延迟500毫秒递归调用自己
}
});
</script>
</head>
<body>
<div id="progressbar"><divclass="progress-label">Loading...</div></div>
</body>
</html>
(2)截图
5、其他
1、事件
(1)create 加载progressbar的时候此事件将被触发
(2)change 进度条有改变的时候此事件将被触发
(3)complete 加载到100的时候此事件将被触发
complete: function(event, ui){ alert('has complete!!');}
});
2、方法
(1) destory 销毁 .progressbar( “destroy” )
(2) disable 不可用 .progressbar( “disable” )
(3) enable 可用 .progressbar( “enable” )
(4) option 获取参数 .progressbar( “option”, optionName )
(5) option 设置参数 .progressbar( “otion” , optionName , [value] )
(6) widget 返回这个element .progressbar( “widget” )
(7) value 获取/设置value .progressbar( “value” , [value] )
$("#divProgressbar").progressbar("value", 90);
三、其他jquery ui 文章
1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker
6、jquery ui(六)拖动排序 sortable
相关联的文章
原地址:
http://ifxoxo.com/jquery-ui-prodressbar.html
- jquery ui(四)进度条 progressbar
- jquery ui(四)进度条 progressbar
- jQuery Easy UI ProgressBar(进度条)组件
- JQuery UI 之进度条——Progressbar
- jQuery UI基础----11jQuery UI Widgets-progressbar(进度条
- Android UI之ProgressBar(进度条)
- Android UI之ProgressBar(进度条)
- UI控件之ProgressBar(进度条)
- Android UI之ProgressBar(进度条)
- JQuery UI之(六)进度条——Progressbar
- android UI篇 进度条 progressbar
- jQuery进度条插件 jQuery progressBar
- jQuery进度条插件 jQuery progressBar
- JQuery UI - progressbar
- jquery ui progressbar
- 玩转Andorid---UI篇---两种进度条(ProgressBar)
- UI组件之 ProgressBar及其子类(一)ProgressBar进度条的使用
- MVC实现有关时间的进度条,使用jQuery ui的progressbar
- JDBC 小程序
- Android中线程同步之Mutex与Condtion的用法
- Linux下的IO监控与分析
- C# 字符串处理
- centos 增加alex 并支持yum
- jquery ui(四)进度条 progressbar
- Android知识点之线程池
- C家
- Google Play和基于Feature的过滤 —— Feature 参考手册
- hadoop数据类型
- 关于研发公司文化"不搞小团队自己人"说起
- Google Play和基于Feature的过滤
- 字体设计结构调整方法
- 单链表中删除重复结点