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

所屬類別

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

用法

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

jQuery.widget.bridge( name, constructor )

參數 類型 類型
name String 要創建的插件名稱。
constructor Function() 當插件被調用時要實例化的對象。

$.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 參數。