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
事件。 該事件在小部件被創建時即被觸發。