jQuery UI 小部件（Widget）方法調用

本節(jié)介紹了jQuery UI小部件（Widget）方法調用的兩種方式。

小部件（Widget）是通過部件庫（Widget Factory）使用方法來改變他們初始化后的狀態(tài)和執(zhí)行動作而被創(chuàng)建的。有兩種調用小部件方法的方式 - 通過部件庫（Widget Factory）創(chuàng)建的插件，或者通過調用元素實例對象上的方法。

插件調用

使用小部件的插件調用方法，把方法名稱以字符串形式進行傳遞。例如，點擊這里查看，如何調用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對象。