进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能，就是progressbar.
一、 老规矩，先上一个简单的例子
1、代码如下：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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、 效果图如下：
jQuery UI Progressbar –ifxoxo
二、具体用法
1、需要加载的js文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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的空容器
<div id="divProgerssbar"></div>
3、js代码
初始化函数：$(.selecter).progressbar()
(1)options
它有三个参数可以使用
| 参数 | 默认值 | 作用 |
| value | 0 | 进度条显示的度数（0到100） |
| max | 100 | 进度条的最大值 |
| disable | false | 是否隐藏 |
(2)事件
create： 加载progressbar的时候此事件将被触发
change： 进度条有改变的时候此事件将被触发
complete： 加载到100的时候此事件将被触发
4、一个会动的进度条的实例
（1）代码如下
<html lang="en">
<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"><div class="progress-label">Loading...</div></div>
</body>
</html>
5、其他
1、事件
(1)create 加载progressbar的时候此事件将被触发
(2)change 进度条有改变的时候此事件将被触发
(3)complete 加载到100的时候此事件将被触发
$('.selector').progressbar({
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);
共同学习，写下你的评论
评论加载中...
作者其他优质文章
