# 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