# jQuery UI 工作原理 jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。其安裝方式與大部分 jQuery 插件的安裝方式類似，jQuery UI 的小部件是基于 [部件庫（Widget Factory）](jqueryui-widget-factory.html) 創建的，小部件庫提供了通用的 API。所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。本教程將通過 [進度條（progressbar）](example-progressbar.html) 小部件代碼實例介紹常見的功能。 ## 安裝 為了跟蹤部件的狀態，我們首先介紹一下小部件的全生命周期。當小部件安裝時，生命周期開始。我們只需要在一個或多個元素上調用插件，即安裝了小部件。 ``` $( "#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` 事件。該事件在小部件被創建時即被觸發。