jQuery UI 小部件方法調(diào)用

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

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

插件調(diào)用

使用小部件的插件調(diào)用方法，把方法名稱以字符串形式進(jìn)行傳遞。例如，點(diǎn)擊這里查看，如何調(diào)用 dialog（對話框）小部件的 close() 方法。

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

如果方法要求參數(shù) ，請作為額外的參數(shù)傳遞給插件。點(diǎn)擊這里查看，如何調(diào)用 dialog（對話框）的 option() 方法。

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

這會(huì)返回 dialog（對話框）的 height 選項(xiàng) 的值。

實(shí)例調(diào)用

每個(gè)小部件的每個(gè)實(shí)例都是使用 jQuery.data() 存儲(chǔ)在元素上。為了檢索實(shí)例對象，請使用小部件的全稱作為鍵名調(diào)用 jQuery.data()。具體如下面實(shí)例所示。

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

在您引用實(shí)例對象之后，可以直接在上面調(diào)用方法。

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

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

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

返回類型

大多數(shù)通過小部件的插件調(diào)用的方法將返回一個(gè) jQuery 對象，所以方法調(diào)用可以通過額外的 jQuery 方法鏈接。當(dāng)在實(shí)例上進(jìn)行調(diào)用時(shí)，則會(huì)返回 undefined。具體如下面實(shí)例所示。

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" );

例外的是，返回小部件相關(guān)信息的那些方法。例如 dialog（對話框）的 isOpen() 方法。

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

這會(huì)產(chǎn)生一個(gè) TypeError 錯(cuò)誤，因?yàn)?isOpen() 返回的是一個(gè)布爾值，而不是一個(gè) jQuery 對象。

上一篇：jQuery UI 擴(kuò)展小部件下一篇：jQuery UI 為什么使用部件庫