jQuery UI API – 插件橋（Widget Plugin Bridge）

所屬類別

實用工具（Utilities） | 小部件（Widgets）

用法

描述： jQuery.widget.bridge()方法是jQuery部件庫（Widget Factory）的一部分。 它扮演著由$.widget() 創建的對象和jQuery API 之間的中介。

$.widget.bridge()做如下事情：

• 連接一個常規的JavaScript 構造函數到jQuery API。
• 自動創建對象實例，並存儲在元素的$.data緩存內。
• 允許調用公有方法。
• 防止調用私有方法。
• 防止在未初始化的對像上調用方法。
• 防止多個初始化。

jQuery UI小部件使用$.widget( "foo.bar", {} );語法定義一個對象來創建。 給出一個帶有五個.foo ， $( ".foo" ).bar();的DOM結構將創建"bar"對象的五個實例。 $.widget.bridge()基於"bar"對象和一個公共的API在庫內工作。 因此，您可以通過編寫$( ".foo" ).bar()來創建實例，通過編寫$( ".foo" ).bar( "baz" )來調用方法。

如果您只想一次性初始化並調用方法，那麼您所傳遞給jQuery.widget.bridge()的對象可以很小：

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

在這裡，您需要的只是一個構造函數，接收兩個參數：

• options ：一個配置選項的對象
• element ：該實例在其上創建的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()方法。 該方法在調用插件且實例已存在時調用。 在這種情況下，您還需要有一個option()方法。 該方法將會以選項作為第一個參數被調用。 如果沒有選項，則參數為一個空對象。 如需了解option方法的使用，請查看$.Widget 。

橋（bridge）有一個可選的屬性，如果存在：如果對象原型有一個widgetFullName屬性，則該屬性將被作為存儲和檢索實例的鍵。 否則，將使用name 參數。