jQuery UI API - 插件桥(Widget Plugin Bridge)
所属类别
实用工具(Utilities) | 小部件(Widgets)
用法
描述:jQuery.widget.bridge() 方法是 jQuery 部件库(Widget Factory) 的一部分。它扮演着由 $.widget() 创建的对象和 jQuery API 之间的中介。
参数 | 类型 | 类型 |
---|---|---|
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 参数。
更多建议: