# Progressbar Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.6
**Description:** 显示一个确定的或不确定的进程状态。
## QuickNav[Examples](#entry-examples)
### Options
+ [disabled](#option-disabled)
+ [max](#option-max)
+ [value](#option-value)
### Methods
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [value](#method-value)
+ [widget](#method-widget)
### Events
+ [change](#event-change)
+ [complete](#event-complete)
+ [create](#event-create)
进度条被设计来显示进度的当前完成百分比。进度条通过 CSS 编码灵活调整大小，默认会缩放到适应父容器的大小。
一个确定的进度条只能在系统可以准确更新当前状态的情况下使用。一个确定的进度条不会从左向右填充，然后循环回到空 - 如果不能计算实际状态，则使用不确定的进度条以便提供用户反馈。
### 主题（Theming）
进度条部件（Progressbar Widget）使用 [jQuery UI CSS 框架](/theming/css-framework/) 来定义它的外观和感观的样式。如果需要使用进度条指定的样式，则可以使用下面的 CSS class 名称：
* `ui-progressbar`：进度条的外层容器。该元素会为不确定的进度条另外添加一个 `ui-progressbar-indeterminate` class。
* `ui-progressbar-value`：该元素代表进度条的填充部分。
* `ui-progressbar-overlay`：用于为不确定的进度条显示动画的覆盖层。
### 依赖（Dependencies）
* [UI 核心（UI Core）](/category/ui-core/)
* [部件库（Widget Factory）](/jQuery.widget/)
### 其他注意事项（Additional Notes）:
* 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
## Options
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为 `true`，则禁用该 progressbar（进度条）。 **Code examples:**
初始化带有指定`disabled`选项的 progressbar（进度条）：
```
$( ".selector" ).progressbar({ disabled: true });
```
在初始化后，获取或设置`disabled` 选项：
```
// getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );
// setter
$( ".selector" ).progressbar( "option", "disabled", true );
```
### max**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `100`progressbar（进度条）的最大值。**Code examples:**
初始化带有指定`max`选项的 progressbar（进度条）：
```
$( ".selector" ).progressbar({ max: 1024 });
```
在初始化后，获取或设置`max` 选项：
```
// getter
var max = $( ".selector" ).progressbar( "option", "max" );
// setter
$( ".selector" ).progressbar( "option", "max", 1024 );
```
### value**Type:** [Number](http://api.jquery.com/Types/#Number) or [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `0`progressbar（进度条）的进度值.**支持多个类型：**
* **Number**: `0` 到 [`max`](#option-max)之间的值.
* **Boolean**:值可以设置为`false` 来创建一个不确定的progressbar（进度条）。
**Code examples:**
初始化带有指定`value`选项的 progressbar（进度条）：
```
$( ".selector" ).progressbar({ value: 25 });
```
在初始化后，获取或设置`value` 选项：
```
// getter
var value = $( ".selector" ).progressbar( "option", "value" );
// setter
$( ".selector" ).progressbar( "option", "value", 25 );
```
## Methods
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全移除 progressbar（进度条） 功能。这会把元素返回到它的预初始化状态。
* 该方法不接受任何参数。
**Code examples:**
调用 destroy 方法：
```
$( ".selector" ).progressbar( "destroy" );
```
### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
禁用 progressbar（进度条） 。
* 该方法不接受任何参数。
**Code examples:**
调用 disable 方法：
```
$( ".selector" ).progressbar( "disable" );
```
### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
启用 progressbar（进度条） 。
* 该方法不接受任何参数。
**Code examples:**
调用 enable 方法：
```
$( ".selector" ).progressbar( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
获取当前与指定的 `optionName` 关联的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项的名称。
**Code examples:**
调用该方法：
```
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个包含键/值对的对象，键/值对表示当前 progressbar 选项哈希。
* 该方法不接受任何参数。
**Code examples:**
调用该方法：
```
var options = $( ".selector" ).progressbar( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置与指定的 `optionName` 关联的 progressbar 选项的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置的选项的名称。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要为选项设置的值。
**Code examples:**
调用该方法：
```
$( ".selector" ).progressbar( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
为 progressbar（进度条） 设置一个或多个选项。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要设置的 option-value 对。
**Code examples:**
调用该方法：
```
$( ".selector" ).progressbar( "option", { disabled: true } );
```
### value()Returns: [Number](http://api.jquery.com/Types/#Number) or [Boolean](http://api.jquery.com/Types/#Boolean)
获取progressbar（进度条）的当前值。
* 该方法不接受任何参数。
**Code examples:**
调用该方法：
```
var progressSoFar = $( ".selector" ).progressbar( "value" );
```
### value( value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置progressbar（进度条）的当前值。
* **value**Type: [Number](http://api.jquery.com/Types/#Number) or [Boolean](http://api.jquery.com/Types/#Boolean)用来设置的值。有效值的详细描述查看[`value`](#option-value) 选项。
**Code examples:**
调用该方法：
```
$( ".selector" ).progressbar( "value", 50 );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个 progressbar（进度条） 的`jQuery`对象。
* 该方法不接受任何参数。
**Code examples:**
调用 widget 方法：
```
var widget = $( ".selector" ).progressbar( "widget" );
```
## Events
### change( event, ui )Type: `progressbarchange`
当 progressbar（进度条） 的值改变的时候触发该事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui` 对象是空的，这里包含它是为了与其他事件保持一致性。_
**Code examples:**
初始化带有指定 change回调的 progressbar（进度条）：
```
$( ".selector" ).progressbar({
change: function( event, ui ) {}
});
```
绑定一个事件监听器到 progressbarchange 事件：
```
$( ".selector" ).on( "progressbarchange", function( event, ui ) {} );
```
### complete( event, ui )Type: `progressbarcomplete`
当progressbar（进度条）达到最大值时触发该事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui` 对象是空的，这里包含它是为了与其他事件保持一致性。_
**Code examples:**
初始化带有指定complete回调的 progressbar（进度条）：
```
$( ".selector" ).progressbar({
complete: function( event, ui ) {}
});
```
绑定一个事件监听器到 progressbarcomplete 事件：
```
$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} );
```
### create( event, ui )Type: `progressbarcreate`
当progressbar（进度条）被创建时触发该事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui` 对象是空的，这里包含它是为了与其他事件保持一致性。_
**Code examples:**
初始化带有指定create回调的 progressbar（进度条）：
```
$( ".selector" ).progressbar({
create: function( event, ui ) {}
});
```
绑定一个事件监听器到 progressbarcreate 事件：
```
$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} );
```
## Examples:
#### Example: 一个简单的 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>
```
#### Example: 一个简单的 jQuery UI 不确定的进度条（Indeterminate 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: false
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget