jQuery UI 小部件(Widget)方法調用
小部件(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 undefineddialog.data( "ui-dialog" ).close();
// Plugin invocation - returns a jQuery objectdialog.dialog( "close" );
// Therefore, plugin method invocation makes it possible to// chain method calls with other jQuery functionsdialog.dialog( "close" )
.css( "color", "red" );
例外的是,返回小部件相關信息的那些方法。例如 dialog(對話框)的 isOpen()
方法。
$( ".selector" )
.dialog( "isOpen" )
// This will throw a TypeError
.css( "color", "red" );
這會產生一個 TypeError
錯誤,因為 isOpen()
返回的是一個布爾值,而不是一個 jQuery 對象。
※jQuery UI 為什麼使用部件庫(Widget Factory)
TAG:程序員小新人學習 |