进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而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、 效果图如下：
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的空容器
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"><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
相关推荐
花生米AJAX-UI系列之:基于JQUERY的Progress进度条控件0.1版 特点： 默认样式类似于EXT 可定义进度条的最大,最小值,进度条的宽度和高度； 可定义进度条的背景样式,边框颜色； 可分别绑定当进度改变时,当进度完全...
本文实例讲述了jquery-ui 进度条功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>www.jb51.net progressbar</title> <...
jQuery UI 进度条（Progressbar） - 自定义标签加载...查看演示不确定的值不确定的进度条，并可在确定和不确定的样式之间切换。jQuery
3.3.7 JQuery UI Progressbar (进度条) 92 3.3.8 JQuery UI Slider (滑动条) 96 3.3.9 JQuery UI Spiner (微调框) 101 3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
3.3.7 JQuery UI Progressbar (进度条) 92 3.3.8 JQuery UI Slider (滑动条) 96 3.3.9 JQuery UI Spiner (微调框) 101 3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
3.3.7 JQuery UI Progressbar (进度条) 92 3.3.8 JQuery UI Slider (滑动条) 96 3.3.9 JQuery UI Spiner (微调框) 101 3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
主要是一些界面的扩展，包括折叠面板（Accordion） , 自动完成（Autocomplete） , 按钮（Button） , 日期选择器（Datepicker） , 对话框（Dialog） , 菜单（Menu） , 进度条（Progressbar） , 滑块（Slider） , 旋转...
在加载文件时更新 jQuery UI 进度条小部件的预加载器。 真的只是 PxLoader 和 Progress 小部件之间的一个花哨的中间件。 依赖关系 （实际上只是小部件） 用法 初始设置 $(function() { GameApp.Preloader....
ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。 应用场景很多，使用起来还很简单。 示例： <!DOCTYPE html> <...
jquery的ui库，包括以下插件：折叠框(accordion)、自动填充文本框(autocomplete)、按钮(button)、日期选择器(datepicker)、对话框(dialog)、进度条(progressbar)、滑动条(slider)、标签栏(tags)... 工作上有用到，...
比较好的一个JqueryUI插件。 版本1.2.3 有四个颜色：blue silver dark sky 每个组件的js，css文件可以分开引用，比如你在一个页面中只需要用到进度条，就只需要引用核心文件和进度条css，js 文件就可以了。不需要...
jquery 及其插件集合 包含 ...jquery.progressbar.min：进度条 jquery.timers-1.2：计时器 jquery.treeview：树形菜单 jquery.uploadify.v2.1.4：多文件上传 jquery-ui-1.8.16.custom.min：jquery UI插件
是多进度条： 该页面是响应式的。 响应功能不支持IE8
引入jquery ui,我们可以轻松得到下面这个静止的力度条： html： <div class=progressbar xss=removed> js： $(function () { $(.progressbar).progressbar({ value: 37 }); 加入Jscex让它动起来： <...