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

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

所屬類別

實(shí)用工具（Utilities） | 小部件（Widgets）

用法

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

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

• 連接一個(gè)常規(guī)的 JavaScript 構(gòu)造函數(shù)到 jQuery API。
• 自動(dòng)創(chuàng)建對(duì)象實(shí)例，并存儲(chǔ)在元素的 $.data 緩存內(nèi)。
• 允許調(diào)用公有方法。
• 防止調(diào)用私有方法。
• 防止在未初始化的對(duì)象上調(diào)用方法。
• 防止多個(gè)初始化。

jQuery UI 小部件使用 $.widget( "foo.bar", {} ); 語(yǔ)法定義一個(gè)對(duì)象來(lái)創(chuàng)建。給出一個(gè)帶有五個(gè) .foo，$( ".foo" ).bar(); 的 DOM 結(jié)構(gòu)將創(chuàng)建 "bar" 對(duì)象的五個(gè)實(shí)例。$.widget.bridge() 基于 "bar" 對(duì)象和一個(gè)公共的 API 在庫(kù)內(nèi)工作。因此，您可以通過(guò)編寫 $( ".foo" ).bar() 來(lái)創(chuàng)建實(shí)例，通過(guò)編寫 $( ".foo" ).bar( "baz" ) 來(lái)調(diào)用方法。

如果您只想一次性初始化并調(diào)用方法，那么您所傳遞給 jQuery.widget.bridge() 的對(duì)象可以很?。?/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è)構(gòu)造函數(shù)，接收兩個(gè)參數(shù)：

• options：一個(gè)配置選項(xiàng)的對(duì)象
• element：該實(shí)例在其上創(chuàng)建的 DOM 元素

然后您可以使用橋（bridge）把該對(duì)象作為一個(gè) jQuery 插件，且可以在任意的 jQuery 對(duì)象上使用它：

// 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）的所有特性，您的對(duì)象原型需要有一個(gè) _init() 方法。該方法在調(diào)用插件且實(shí)例已存在時(shí)調(diào)用。在這種情況下，您還需要有一個(gè) option() 方法。該方法將會(huì)以選項(xiàng)作為第一個(gè)參數(shù)被調(diào)用。如果沒(méi)有選項(xiàng)，則參數(shù)為一個(gè)空對(duì)象。如需了解 option 方法的使用，請(qǐng)查看 $.Widget。

橋（bridge）有一個(gè)可選的屬性，如果存在：如果對(duì)象原型有一個(gè) widgetFullName 屬性，則該屬性將被作為存儲(chǔ)和檢索實(shí)例的鍵。否則，將使用 name 參數(shù)。