进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而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
相关推荐
jQuery UI的进度条插件允许通过CSS进行样式定制，可以通过修改`ui-progressbar`和`ui-progressbar-value`类来改变进度条的基本外观。 2. **动画效果** 进度条插件支持动画效果，当调用`value`方法时，进度会平滑...
3. 初始化jQuery UI进度条：在JavaScript中，使用`$("#progress-bar").progressbar();`来创建进度条，并可以通过`.progressbar("value", percentage)`设置或更新进度值。 4. 进度控制：根据注册流程的不同阶段，调整...
总结来说，"jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效"是一个使用jQuery创建的动态、轻量级的UI组件，它可以增强用户体验，提供视觉上的互动反馈。通过结合CSS样式和JavaScript，我们...
jQuery UI中的progressbar插件是一个非常实用的工具，用于在用户界面上显示各种进度信息，例如文件上传、数据处理或加载状态。它通过图形化的方式，为用户提供直观的反馈，显示任务执行的进度。本篇文章将深入探讨...
然后，我们使用jQuery-UI的progressbar插件来显示进度条。 在JavaScript代码中，我们定义了两个函数：GetProgress和DoWork。GetProgress函数用于查询任务的进度信息，并将其显示在进度条中。DoWork函数用于触发任务...
"jquery.progressbar.1.2.zip"是jQuery的一个进度条插件版本，它提供了构建进度条的API和预设样式。使用这样的插件可以大大简化开发过程，只需几行代码就能创建出美观且功能完善的进度条。 最后，"进度条"这个...
jQuery有多种进度条插件可供选择，如NProgress、Bootstrap Progress Bar、jQuery UI Progressbar等。这些插件通常提供丰富的样式和自定义选项，可以快速地在项目中实现进度条功能。 3. **NProgress插件** ...
jQuery Progressbar 是一款广泛使用的JavaScript库，用于在网页上创建美观且功能丰富的进度条组件。这个插件允许开发者轻松地创建动态变换的进度效果，并且支持彩色和自定义样式，以适应各种用户界面的需求。 首先...
如果想进一步了解jQuery UI的进度条，可以访问官方文档：http://jqueryui.com/progressbar/。 总的来说，jQuery UI的进度条功能提供了一种简单而有效的方式来显示任务的完成进度。你可以自定义其样式，调整速度，...
`jquery progressBar`就是jQuery提供的一种实现进度条功能的组件，常用于展示任务完成的进度或者数据加载状态，为用户提供了良好的交互体验。本文将深入探讨如何使用jQuery和jQuery UI库中的progressbar组件，以及其...
1. **部件（Widgets）**：jQuery UI提供了多种UI部件，如日期选择器（Datepicker）、对话框（Dialog）、滑块（Slider）、进度条（Progressbar）、标签页（Tabs）和下拉菜单（Selectmenu）等。这些部件都封装了复杂的...
要了解更多关于AmazeUI进度条的详细信息，可以参考官方文档和示例，例如博文链接中给出的地址（可能已过期，需自行搜索最新文档），那里通常包含更全面的API介绍、示例代码以及常见问题解答。 通过以上知识点，你...
2. **进度条插件**：jQuery社区有许多现成的进度条插件，如`jQuery UI Progressbar`、`NProgress`等。这些插件提供了预定义的样式和功能，使得创建进度条变得简单。博客可能会介绍如何安装和配置这些插件。 3. **...
1. **组件（Widgets）**：这些是预设的UI元素，如日期选择器（Datepicker）、对话框（Dialog）、下拉菜单（Selectmenu）、滑块（Slider）、进度条（ProgressBar）等。通过简单的API，开发者可以轻松地将这些组件集成...
这个压缩包中的“jqueryui-API(最完整).pdf”文档全面介绍了jQuery UI API，是开发者学习和使用jQuery UI的重要参考资料。 jQuery UI 的核心在于其组件，包括但不限于：日期选择器（Datepicker）、对话框（Dialog）...
jQuery UI的核心在于它的组件，这些组件是预先封装好的UI元素，如Accordion（手风琴）、Autocomplete（自动完成）、Button（按钮）、Calendar（日历，即日期选择器）、Dialog（对话框）、Draggable（可拖动）、...
1. **部件（Widgets）**：jQueryUI提供了许多预先封装好的UI部件，如日期选择器（Datepicker）、滑块（Slider）、对话框（Dialog）、进度条（Progressbar）、下拉菜单（Autocomplete）等。这些部件都具有高度可定制...
jQuery UI的核心是其组件系统，这些组件包括但不限于：`accordion`（手风琴）、`autocomplete`（自动完成）、`datepicker`（日期选择器）、`dialog`（对话框）、`draggable`（可拖动）、`droppable`（可放置）、`...
花生米AJAX-UI系列之:基于JQUERY的Progress进度条控件0.1版 特点： 默认样式类似于EXT 可定义进度条的最大,最小值,进度条的宽度和高度； 可定义进度条的背景样式,边框颜色； 可分别绑定当进度改变时,当进度完全...