# Widget Plugin Bridge
Categories: [Utilities](http://www.css88.com/jquery-ui-api/category/utilities/ "View all posts in Utilities") | [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## jQuery.widget.bridge( name, constructor )
**Description:** `jQuery.widget.bridge()` 方法是 [jQuery 部件庫(Widget Factory)](/jQuery.widget/) 的一部分。它扮演著由 `$.widget()` 創建的對象和 jQuery API 之間的中介。
* #### [jQuery.widget.bridge( name, constructor )](#jQuery-widget-bridge-name-constructor)
* **name**Type: [String](http://api.jquery.com/Types/#String)要創建的插件名稱。
* **constructor**Type: [Function](http://api.jquery.com/Types/#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`](/jQuery.widget/#jQuery-Widget2)。
橋(bridge)有一個可選的屬性,如果存在:如果對象原型有一個 `widgetFullName` 屬性,則該屬性將被作為存儲和檢索實例的鍵。否則,將使用 name 參數。
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget