jQuery UI API - 插件橋(Widget Plugin Bridge)
所屬類別
實(shí)用工具(Utilities) | 小部件(Widgets)
用法
描述:jQuery.widget.bridge() 方法是 jQuery 部件庫(Widget Factory) 的一部分。它扮演著由 $.widget() 創(chuàng)建的對象和 jQuery API 之間的中介。
參數(shù) | 類型 | 類型 |
---|---|---|
name | String | 要創(chuàng)建的插件名稱。 |
constructor | Function() | 當(dāng)插件被調(diào)用時要實(shí)例化的對象。 |
$.widget.bridge()
做如下事情:
- 連接一個常規(guī)的 JavaScript 構(gòu)造函數(shù)到 jQuery API。
- 自動創(chuàng)建對象實(shí)例,并存儲在元素的
$.data
緩存內(nèi)。 - 允許調(diào)用公有方法。
- 防止調(diào)用私有方法。
- 防止在未初始化的對象上調(diào)用方法。
- 防止多個初始化。
jQuery UI 小部件使用 $.widget( "foo.bar", {} );
語法定義一個對象來創(chuàng)建。給出一個帶有五個 .foo
,$( ".foo" ).bar();
的 DOM 結(jié)構(gòu)將創(chuàng)建 "bar" 對象的五個實(shí)例。$.widget.bridge()
基于 "bar" 對象和一個公共的 API 在庫內(nèi)工作。因此,您可以通過編寫 $( ".foo" ).bar()
來創(chuàng)建實(shí)例,通過編寫 $( ".foo" ).bar( "baz" )
來調(diào)用方法。
如果您只想一次性初始化并調(diào)用方法,那么您所傳遞給 jQuery.widget.bridge()
的對象可以很?。?/p>
var Highlighter = function( options, element ) { this.options = options; this.element = $( element ); this._set( 800 ); }; Highlighter.prototype = { toggle: function() { this._set( this.element.css( "font-weight") === 400 ? 800 : 400 ); }, _set: function(value) { this.element.css( "font-weight", value ); } };
在這里,您需要的只是一個構(gòu)造函數(shù),接收兩個參數(shù):
options
:一個配置選項(xiàng)的對象element
:該實(shí)例在其上創(chuàng)建的 DOM 元素
然后您可以使用橋(bridge)把該對象作為一個 jQuery 插件,且可以在任意的 jQuery 對象上使用它:
// Hook up the plugin $.widget.bridge( "colorToggle", Highlighter ); // Initialize it on divs $( "div" ).colorToggle().click(function() { // Call the public method on click $( this ).colorToggle( "toggle" ); });
為了使用橋(bridge)的所有特性,您的對象原型需要有一個 _init()
方法。該方法在調(diào)用插件且實(shí)例已存在時調(diào)用。在這種情況下,您還需要有一個 option()
方法。該方法將會以選項(xiàng)作為第一個參數(shù)被調(diào)用。如果沒有選項(xiàng),則參數(shù)為一個空對象。如需了解 option
方法的使用,請查看 $.Widget
。
橋(bridge)有一個可選的屬性,如果存在:如果對象原型有一個 widgetFullName
屬性,則該屬性將被作為存儲和檢索實(shí)例的鍵。否則,將使用 name 參數(shù)。
更多建議: