ui.widget Class
$.ui.widget 部件库（Widget Factory）
使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。
您可以使用 $.Widget 对象作为要继承的基础，或者可以明确地从现有的 jQuery UI 或第三方控件，从头开始创建新的小部件。
定义一个带有相同名称的小部件来继承基础部件，甚至允许您适当地扩展小部件。
jQuery UI 中包含许多保持状态的小部件，因此比典型的 jQuery 插件稍有不同的使用模式。
所有的jQuery UI 小部件使用相同的模式，这是由部件库（Widget Factory）定义的。
所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
Constructor
ui.widget
()
Methods
_create
()
JQuery (plugin only)
private
_create() 方法是小部件的构造函数。没有参数，但是 this.element 和 this.options 已经设置。
Returns:
Example:
//基于一个选项设置小部件元素的背景颜色。
_create: function() {
this.element.css( "background-color", this.options.color );
}_delay
-
handler -
delay
在指定延迟后调用提供的函数。保持 this 上下文正确。本质上是 setTimeout()。 使用 clearTimeout() 返回超时 ID。
Parameters:
-
handlerFunction | String要调用的函数。也可以是小部件上方法的名称。
-
delayNumber调用函数前等待的毫秒数，默认为 0。
Returns:
[description]
Example:
//100 毫秒后在小部件上调用 _foo() 方法。
this._delay( this._foo, 100 );_destroy
()
JQuery (plugin only)
private
公共的 destroy() 方法清除所有的公共数据、事件等等。代表了定制、指定小部件、清理的 _destroy()。
Returns:
Example:
//当小部件被销毁时，从小部件的元素移除一个 class。
_destroy: function() {
this.element.removeClass( "my-widget" );
}_focusable
-
element
建立聚焦在元素上时要应用 ui-state-focus class 的 element。
Parameters:
-
elementJQuery要应用 focusable 行为的元素。
Returns:
[description]
Example:
//向小部件内的一组元素应用 focusable 样式：
this._focusable( this.element.find( ".my-items" ) );_getCreateEventData
()
Object
private
所有的小部件触发 create 事件。默认情况下，事件中不提供任何的数据，但是该方法会返回一个对象，作为 create 事件的数据被传递。
Returns:
Example:
//向 create 事件处理程序传递小部件的选项，作为参数。
_getCreateEventData: function() {
return this.options;
}_getCreateOptions
()
Object
private
该方法允许小部件在初始化期间为定义选项定义一个自定义的方法。用户提供的选项会覆盖该方法返回的选项，即会覆盖默认的选项。
Returns:
Example:
//让小部件元素的 id 属性作为选项可用。
_getCreateOptions: function() {
return { id: this.element.attr( "id" ) };
}_hoverable
-
element
建立悬浮在元素上时要应用 ui-state-hover class 的 element。事件处理程序在销毁时自动清理。
Parameters:
-
elementJQuery要应用 hoverable 行为的元素。
Returns:
[description]
Example:
//当悬浮在元素上时，向元素内所有的 div 应用 hoverable 样式。
this._hoverable( this.element.find( "div" ) );_init
()
JQuery (plugin only)
private
小部件初始化的理念与创建不同。任何时候不带参数的调用插件或者只带一个选项哈希的调用插件，初始化小部件。当小部件被创建时会包含这个方法。
注释：如果存在不带参数成功调用小部件时要执行的逻辑动作，初始化只能在这时处理。
Returns:
Example:
//如果设置了 autoOpen 选项，则调用 open() 方法。
_init: function() {
if ( this.options.autoOpen ) {
this.open();
}
}_off
-
element -
eventName
从指定的元素取消绑定事件处理程序。
Parameters:
-
elementJQuery要取消绑定事件处理程序的元素。不像 _on() 方法，_off() 方法中元素是必需的。
-
eventNameString一个或多个空格分隔的事件类型。
Returns:
[description]
Example:
//从小部件的元素上取消绑定所有 click 事件。
this._off( this.element, "click" );_on
-
[suppressDisabledCheck=false] -
element -
handlers
授权通过事件名称内的选择器被支持，例如 "click .foo"。_on() 方法提供了一些直接事件绑定的好处：
保持处理程序内适当的 this 上下文。
自动处理禁用的部件：如果小部件被禁用或事件发生在带有 ui-state-disabled class 的元素上，则不调用事件处理程序。
可以被 suppressDisabledCheck 参数重写。
事件处理程序会自动添加命名空间，在销毁时会自动清理。
Parameters:
-
[suppressDisabledCheck=false]Boolean optional是否要绕过禁用的检查。
-
elementJQuery要绑定事件处理程序的元素。如果未提供元素，this.element 用于未授权的事件，widget 元素 用于授权的事件。
-
handlersObject一个 map，其中字符串键代表事件类型，可选的选择器用于授权，值代表事件调用的处理函数。
Returns:
[description]
Example:
//放置小部件元素内所有被点击的链接的默认行为。
this._on( this.element, {
"click a": function( event ) {
event.preventDefault();
}
});_setOption
-
key -
value
为每个独立的选项调用 _setOptions() 方法。小部件状态随着改变而更新。
Parameters:
-
keyString要设置的选项名称。
-
valueObject为选项设置的值。
Example:
//当小部件的 height 或 width 选项改变时，更新小部件的元素。
_setOption: function( key, value ) {
if ( key === "width" ) {
this.element.width( value );
}
if ( key === "height" ) {
this.element.height( value );
}
this._super( key, value );
}_setOptions
-
options
当调用 option() 方法时调用，无论以什么形式调用 option()。如果您要根据多个选项的改变而改变处理器密集型，重载该方法是很有用的。
Parameters:
-
optionsObject为选项设置的值。
Example:
//如果小部件的 height 或 width 选项改变，调用 resize 方法。
_setOptions: function( options ) {
var that = this,
resize = false;
$.each( options, function( key, value ) {
that._setOption( key, value );
if ( key === "height" || key === "width" ) {
resize = true;
}
});
if ( resize ) {
this.resize();
}
}_trigger
-
type -
event -
data
触发一个事件及其相关的回调。带有该名称的选项与作为回调被调用的类型相等。
事件名称是小部件名称和类型的小写字母串。
注释：当提供数据时，您必须提供所有三个参数。如果没有传递事件，则传递 null。
如果默认行为是阻止的，则返回 false，否则返回 true。当处理程序返回 false 时或调用 event.preventDefault() 时，则阻止默认行为发生。
Parameters:
-
typeStringtype 应该匹配回调选项的名称。完整的事件类型会自动生成。
-
eventEvent导致该事件发生的原始事件，想听众提供上下文时很有用。
-
dataObject一个与事件相关的数据哈希。
Returns:
[description]
Example:
//当按下一个键时，触发 search 事件。
this._on( this.element, {
keydown: function( event ) {
// Pass the original event so that the custom search event has
// useful information, such as keyCode
this._trigger( "search", event, {
// Pass additional information unique to this event
value: this.element.val()
});
}
});destroy
()
JQuery (plugin only)
完全移除小部件功能。这会把元素返回到它的预初始化状态。
Returns:
Example:
//当点击小部件的任意锚点时销毁小部件。
this._on( this.element, {
"click a": function( event ) {
event.preventDefault();
this.destroy();
}
});disable
()
JQuery (plugin only)
禁用小部件。
Returns:
Example:
//当点击小部件的任意锚点时禁用小部件。
this._on( this.element, {
"click a": function( event ) {
event.preventDefault();
this.disable();
}
});enable
()
JQuery (plugin only)
启用小部件。
Returns:
Example:
//当点击小部件的任意锚点时启用小部件。
this._on( this.element, {
"click a": function( event ) {
event.preventDefault();
this.enable();
}
});option
-
key -
value
设置与指定的 key 关联的小部件选项的值。
Parameters:
-
keyString要设置的选项的名称。
-
valueObject要为选项设置的值。
Returns:
[description]
Example:
//设置 width 选项为 500。
this.option( "width", 500 );widget
()
JQuery
返回一个包含原始元素或其他相关的生成元素的 jQuery 对象。
Returns:
[description]
Example:
//当创建小部件时，在小部件的原始元素周围放置一个红色的边框。
_create: function() {
this.widget().css( "border", "2px solid red" );
} widget
-
name -
base -
prototype
使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。
Parameters:
-
nameString要创建的小部件名称，包括命名空间。
-
baseFunction要继承的基础小部件。必须是一个可以使用
new关键词实例化的构造函数。默认为 jQuery.Widget。 -
prototypePlainObject要作为小部件原型使用的对象。
Returns:
[description]
Properties
defaultElement
String
当构造小部件实例未提供元素时要使用的元素。 例如，由于进度条的 defaultElement 是 "<div >"， $.ui.progressbar({ value: 50 }) 在一个新建的 <div> 上实例化进度条小部件实例。
Default: '<div>'
options
Object
一个包含小部件当前使用选项的对象。 在实例化时，用户提供的任何选项将会自动与 $.myNamespace.myWidget.prototype.options 中定义的默认值合并。用户指定的选项会覆盖默认值。
widgetEventPrefix
String
deprecated
添加到小部件事件名称的前缀。 例如，可拖拽小部件（Draggable Widget） 的 widgetEventPrefix 是 "drag"，因此当创建一个 draggable 时，事件的名称是 "dragcreate"。 默认情况下，小部件的 widgetEventPrefix 是它的名称。
widgetName
String
小部件的名称。对于 $.widget( "myNamespace.myWidget", {} )，widgetName 将是 "myWidget"。