jquery ui（四）进度条 progressbar
进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而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、 效果图如下：
<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/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>（2）截图
progressbar loading的截图ifxoxo.com
进度条增加value的截图ifxoxo.com
progressbar 完成的截图ifxoxo.com
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);三、其他相关联文章
1、jquery ui（一）简介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）弹出窗口 dialog
4、jquery ui（四）进度条 progressbar
5、jquery ui（五）日期选择器 datepicker
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>（2）截图
<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>
（2）截图
progressbar loading的截图ifxoxo.com
进度条增加value的截图ifxoxo.com
progressbar 完成的截图ifxoxo.com
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);
三、其他相关联文章
1、jquery ui（一）简介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）弹出窗口 dialog
4、jquery ui（四）进度条 progressbar
5、jquery ui（五）日期选择器 datepicker