jQuery UI 小部件方法調用

小部件（Widget）是透過 部件庫（Widget Factory） 使用方法來改變他們初始化後的狀態和執行動作而創建的。有兩種呼叫小部件方法的方式 - 透過部件庫（Widget Factory）創建的插件，或透過呼叫元素實例物件上的方法。

外掛程式呼叫

使用小部件的外掛呼叫方法，把方法名稱以字串形式傳遞。例如，點擊這裡查看，如何呼叫 dialog（對話框）小部件的 close() 方法。

$( ".selector" ).dialog( "close" );

如果方法要求參數 ，請作為額外的參數傳遞給插件。點擊這裡查看，如何呼叫 dialog（對話框）的 option() 方法。

$( ".selector" ).dialog( "option", "height" );

這會傳回 dialog（對話框）的 height 選項 的值。

實例呼叫

每個小部件的每個實例都是使用 jQuery.data() 儲存在元素上。為了檢索實例對象，請使用小部件的全名作為鍵名來呼叫 jQuery.data()。具體如下面實例所示。

var dialog = $( ".selector" ).data( "ui-dialog" );

在您引用實例物件之後，可以直接在上面呼叫方法。

var dialog = $( ".selector" ).data( "ui-dialog" );
dialog.close();

在 jQuery UI 1.11 中，新的 instance() 方法會使得這個過程變得更簡單。

$( ".selector" ).dialog( "instance" ).close();

返回類型

大多數透過小部件的插件呼叫的方法將傳回一個 jQuery 對象，所以方法呼叫可以透過額外的 jQuery 方法連結。當在實例上進行呼叫時，則會傳回 undefined。具體如下面實例所示。

var dialog = $( ".selector" ).dialog();
 
// Instance invocation - returns undefined
dialog.data( "ui-dialog" ).close();
 
// Plugin invocation - returns a jQuery object
dialog.dialog( "close" );
 
// Therefore, plugin method invocation makes it possible to
// chain method calls with other jQuery functions
dialog.dialog( "close" )
    .css( "color", "red" );

例外的是，傳回小部件相關資訊的那些方法。例如 dialog（對話框）的 isOpen() 方法。

$( ".selector" )
    .dialog( "isOpen" )
    // This will throw a TypeError
    .css( "color", "red" );

這會產生一個 TypeError 錯誤，因為 isOpen() 傳回的是一個布林值，而不是一個 jQuery 物件。