jQuery UI （11）Progressbar 进度条插件

显示一个确定的或不确定的进程状态。

进度条被设计来显示进度的当前完成百分比。进度条通过 CSS 编码灵活调整大小，默认会缩放到适应父容器的大小。

一个确定的进度条只能在系统可以准确更新当前状态的情况下使用。一个确定的进度条不会从左向右填充，然后循环回到空 - 如果不能计算实际状态，则使用不确定的进度条以便提供用户反馈。

主题化

进度条部件（Progressbar Widget）使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用进度条指定的样式，则可以使用下面的 CSS class 名称：

ui-progressbar：进度条的外层容器。该元素会为不确定的进度条另外添加一个 ui-progressbar-indeterminate class。
- ui-progressbar-value：该元素代表进度条的填充部分。
  - ui-progressbar-overlay：用于为不确定的进度条显示动画的覆盖层。

依赖

附加说明

该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

快速导航

选项

disabled：如果设置为 true，则禁用该 progressbar（进度条）。
max：progressbar（进度条）的最大值。
value：progressbar（进度条）的进度值.

方法

destroy()：完全移除 progressbar（进度条）功能。这会把元素返回到它的预初始化状态。
disable()：禁用 progressbar（进度条）。
enable()：启用 progressbar（进度条）。
option()：获取当前与指定的 optionName 关联的值。
value()：获取或设置progressbar（进度条）的当前值。
widget()：返回一个 progressbar（进度条）的jQuery对象。

事件

change( event, ui )：当 progressbar（进度条）的值改变的时候触发该事件。
complete( event, ui )：当progressbar（进度条）达到最大值时触发该事件。
create( event, ui )：当progressbar（进度条）被创建时触发该事件。

实例

一个简单的 jQuery UI Progressbar

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: 37
});
</script>
 
</body>
</html>

一个简单的 jQuery UI 不确定的进度条（Indeterminate Progressbar）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>进度条部件（Progressbar Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

查看演示