jQuery UI 工作原理

jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 外掛程式使用模式略有不同。其安裝方式與大部分 jQuery 插件的安裝方式類似，jQuery UI 的小部件是基於部件庫（Widget Factory）創建的，小部件庫提供了通用的 API。所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。本教學將透過進度條（progressbar）小工具程式碼實例介紹常見的功能。

安裝

為了追蹤部件的狀態，我們先介紹小部件的全生命週期。當小部件安裝時，生命週期開始。我們只需要在一個或多個元素上呼叫插件，即安裝了小部件。

$( "#elem" ).progressbar();

這將會初始化 jQuery 物件中的每個元素，在本例中，元素 id 為 "elem"。因為我們呼叫無參數的 .progressbar() 方法，小部件則會依照它的預設選項進行初始化。我們可以在安裝時傳遞一組選項，這樣既可重寫預設選項。

$( "#elem" ).progressbar({ value: 20 });

安裝時傳遞的選項數目多少可根據我們的需要而定。任何我們未傳遞的選項都使用它們的預設值。

選項是小工具狀態的組成部分，所以我們也可以在安裝後再進行設定選項。我們將在後續的 option 方法中介紹這部分。

方法

既然小部件已經初始化，我們就可以查詢它的狀態，或是在小部件上執行動作。所有初始化後的動作都以方法呼叫的形式進行。為了在小部件上呼叫一個方法，我們可以向 jQuery 插件傳遞方法的名稱。例如，為了在進度條（progressbar）小工具上呼叫 value 方法，我們應該使用：

$( "#elem" ).progressbar( "value" );

如果方法接受參數，我們可以在方法名稱後傳遞參數。例如，為了傳遞參數40 給value 方法，我們可以使用：

$( "#elem" ).progressbar( "value", 40 );

就像jQuery 中的其他方法一樣，大部分的小部件方法為鏈接傳回jQuery 物件。

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

公共的方法

每個小部件都有它自己的一套基於小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。

option

正如我們前面所提到的，我們可以在初始化之後透過 option 方法改變選項。例如，我們可以透過呼叫 option 方法來改變 progressbar（進度條）的 value 為 30。

$( "#elem" ).progressbar( "option", "value", 30 );

請注意，這與先前我們呼叫 value 方法的實例有所不同。在本實例中，我們呼叫 option 方法，改變 value 選項為 30。

我們也可以為某個選項取得目前的值。

$( "#elem" ).progressbar( "option", "value" );

另外，我們可以透過給 option 方法傳遞一個對象，一次更新多個選項。

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

您或許注意到option 方法有著與jQuery 程式碼中取值器和設定器相同的標誌，就像.css() 和.attr( )。唯一的不同就是您必須傳遞字串 "option" 作為第一個參數。

disable

disable 方法停用小工具。在進度條（progressbar）實例中，這會改變樣式讓進度條顯示為停用狀態。

$( "#elem" ).progressbar( "disable" );

呼叫 disable 方法等同於設定 disabled 選項為 true。

enable

enable 方法是 disable 方法的對立面。

$( "#elem" ).progressbar( "enable" );

呼叫 enable 方法等同於設定 disabled 選項為 false。

destroy

如果您不再需要小部件，那麼可以銷毀它，回到最初的標記。這意味著小部件生命週期的終止。

$( "#elem" ).progressbar( "destroy" );

一旦您銷毀了一個小部件，您就無法在該部件上呼叫任何方法，除非您再次初始化這個小部件。如果您要移除元素，可以直接透過.remove()，也可以透過.html() 或.empty() 修改祖先，小部件會自動銷毀。

widget

一些小工具產生包裝器元素，或與原始元素斷開連接的元素。在下面的實例中，widget 將會傳回產生的元素。在進度條（progressbar）實例中，沒有產生的包裝器，widget 方法傳回原始的元素。

$( "#elem" ).progressbar( "widget" );

事件

所有的小部件都有跟他們各種行為相關的事件，用於在狀態改變時通知您。對於大多數的小部件，當事件被觸發時，名稱以小部件名稱為前綴。例如，我們可以綁定進度條（）的 change 事件，一旦值變更時就觸發。

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

每個事件都有一個相對應的回調，作為選項進行呈現。我們可以使用進度條（progressbar）的 change 回調，這等同於綁定 progressbarchange 事件。

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

公共的事件

大多數事件是針對特定的小部件，所有的小部件都有一個公共的 create 事件。該事件在小部件被創建時即被觸發。