jQuery UI API – 部件庫(Widget Factory)
所屬類別
實用工具(Utilities) | 小部件(Widgets)
jQuery.widget( name [, base ], prototype ) 用法
描述:使用與所有jQuery UI小部件相同的抽象化來創建有狀態的jQuery插件。
参数 | 类型 | 类型 |
---|---|---|
name | String | 要创建的小部件名称,包括命名空间。 |
base | Function() | 要继承的基础小部件。必须是一个可以使用 `new` 关键词实例化的构造函数。默认为 jQuery.Widget。 |
prototype | PlainObject | 要作为小部件原型使用的对象。 |
您可以使用$.Widget
對像作為要繼承的基礎,或者可以明確地從現有的jQuery UI或第三方控件,從頭開始創建新的小部件。 定義一個帶有相同名稱的小部件來繼承基礎部件,甚至允許您適當地擴展小部件。
jQuery UI 中包含許多保持狀態的小部件,因此比典型的jQuery 插件稍有不同的使用模式。 所有的jQuery UI 小部件使用相同的模式,這是由部件庫(Widget Factory)定義的。 所以,只要您學會使用其中一個,您就知道如何使用其他的小部件(Widget)。
註釋:本章節使用進度條部件(Progressbar Widget)演示實例,但是語法適用於每個小部件。
初始化
為了跟踪小部件的狀態,我們必須引入小部件的全生命週期。 小部件初始化時生命週期開始。 要初始化一個小部件,我們只需要簡單地在一個或多個元素上調用插件。
$( "#elem" ).progressbar();
這將初始化jQuery 對像中的每個元素。 上面實例中元素id為"elem"
。
選項
由於progressbar()
調用時不帶參數,小部件是使用默認選項進行初始化的。 我們可以在初始化時傳遞一組選項來覆蓋默認選項:
$( "#elem" ).progressbar({ value: 20 });
我們可以根據需要傳遞選項的個數,任何我們未傳遞的選項都使用它們的默認值。
您可以傳遞多個選項參數,這些參數將會被合併為一個對象(類似於$.extend( true, target, object1, objectN )
)。 這在為所有實例覆蓋一些設置,實例間共享選項時很有用:
var options = { modal: true, show: "slow" }; $( "#dialog1" ).dialog( options ); $( "#dialog2" ).dialog( options, { autoOpen: false });
所有在初始化時傳遞的選項都是深拷貝的,確保後續在不影響小部件的情況下修改對象。 數組是唯一的例外,它們是按原樣引用的。 這個例外是為了適當地支持數據綁定,其中數據源必須作為引用。
默認值保存在小部件的屬性中,因此我們可以覆蓋jQuery UI 設置的值。 例如,在下面的設置後,所有將來的進度條實例將默認為值80:
$.ui.progressbar.prototype.options.value = 80;
選項是小部件狀態的組成部分,所以我們也可以在初始化後設置選項。 我們會在後續看到option 方法。
方法
現在小部件已經初始化,我們可以查詢它的狀態,或者在小部件上執行動作。 所有初始化後的動作都是以方法調用方式執行。 為了在小部件上調用一個方法,我們向jQuery 插件傳遞方法的名稱。 例如,在進度條部件(Progressbar Widget)上調用value()
方法,我們可以使用:
$( "#elem" ).progressbar( "value" );
如果方法接受參數,我們可以在方法名稱後傳遞參數。 例如,要傳遞參數40
到value()
方法,我們可以使用:
$( "#elem" ).progressbar( "value", 40 );
就像jQuery 中的其他方法,大多數的小部件方法返回jQuery 對象:
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );
每個小部件都有自己的方法設置,這些設置是基於小部件提供的功能。 但是,有一些方法是存在於所有的小部件上,這會在下面進行詳細講解。
事件
所有的小部件都有與它們各種行為相關的事件,以便在狀態改變的時候通知您。 對於大多數的小部件,當事件被觸發時,名稱以小部件名稱的小寫字母形式作為前綴。 例如,我們可以綁定進度條的change
事件,該事件在值改變時觸發。
$( "#elem" ).bind( "progressbarchange", function() { alert( "The value has changed!" ); });
每個事件都有一個對應的回調,這會作為選項。 如果需要,我們可以抓住進度條的change
回調,而不用綁定progressbarchange
事件。
$( "#elem" ).progressbar({ change: function() { alert( "The value has changed!" ); } });
所有的小部件都有一個change
事件,該事件在實例化時觸發。
實例化
小部件的實例是使用帶有小部件全稱作為鍵的jQuery.data()
存儲的。 因此,您可以使用下面代碼從元素檢索進度條部件(Progressbar Widget)的實例對象。
$( "#elem" ).data( "ui-progressbar" );
元素是否綁定了給定小部件,可以使用:data
選擇器來檢測。
$( "#elem" ).is( ":data( 'ui-progressbar' )" ); // true $( "#elem" ).is( ":data( 'ui-draggable' )" ); // false
您也可以使用:data
來獲得作為給定小部件實例的所有元素的列表。
$( ":data( 'ui-progressbar' )" );
屬性
所有的小部件都有下面的屬性:
- defaultElement :當構造小部件實例未提供元素時要使用的元素。 例如,由於進度條的
defaultElement
是"<div>
",$.ui.progressbar({ value: 50 })
在一個新建的<div>
上實例化進度條小部件實例。 - document :其內包含小部件元素的
document
。 如果需要在框架內與小部件進行交互時很有用。 - element :一個jQuery對象,包含用於實例化小部件的元素。 如果您選擇多個元素並調用
.myWidget()
,將為每個元素創建一個單獨的小部件實例。 因此,該屬性總是包含一個元素。 - namespace :小部件原型存儲的全局jQuery對象的位置。 例如,
"ui"
的namespace
表示小部件原型存儲在$.ui
。 - options :一個包含小部件當前使用選項的對象。 在實例化時,用戶提供的任何選項將會自動與
$.myNamespace.myWidget.prototype.options
中定義的默認值合併。 用戶指定的選項會覆蓋默認值。 - uuid :一個表示控件標識符的唯一整數。
- version :小部件的字符串版本。 對於jQuery UI 小部件,該屬性會被設置為小部件使用的jQuery UI 的版本。 插件開發者必須在他們的原型中明確設置該屬性。
- widgetEventPrefix :添加到小部件事件名稱的前綴。 例如, 可拖拽小部件(Draggable Widget)的
widgetEventPrefix
是"drag"
,因此當創建一個draggable時,事件的名稱是"dragcreate"
。 默認情況下,小部件的widgetEventPrefix
是它的名稱。 注意:該屬性已被廢棄,將在以後的版本中非常。 事件名稱將被改為widgetName:eventName (例如"draggable:create"
)。 - widgetFullName :包含命名空間的小部件全稱。 對於
$.widget( "myNamespace.myWidget", {} )
,widgetFullName
將是"myNamespace-myWidget"
。 - widgetName :小部件的名稱。 對於
$.widget( "myNamespace.myWidget", {} )
,widgetName
將是"myWidget"
。 - window :其內包含小部件元素的
window
。 如果需要在框架內與小部件進行交互時很有用。
jQuery.Widget 基礎小部件用法
描述:部件庫(Widget Factory)使用的基礎小部件。
快速導航
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
disabled | Boolean | 如果设置为 true ,则禁用该小部件。代码实例: 初始化带有指定 $( ".selector" ).widget({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).widget( "option", "disabled" ); // setter $( ".selector" ).widget( "option", "disabled", true ); |
false |
hide | Boolean 或 Number 或 String 或 Object | 是否使用动画隐藏元素,以及如何动画隐藏元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } }); 在初始化后,获取或设置 // getter var hide = $( ".selector" ).widget( "option", "hide" ); // setter $( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } ); |
null |
show | Boolean 或 Number 或 String 或 Object | 是否使用动画显示元素,以及如何动画显示元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ show: { effect: "blind", duration: 800 } }); 在初始化后,获取或设置 // getter var show = $( ".selector" ).widget( "option", "show" ); // setter $( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } ); |
null |
方法 | 返回 | 描述 |
---|---|---|
_create() | jQuery (plugin only) | _create() 方法是小部件的构造函数。没有参数,但是 this.element 和 this.options 已经设置。
代码实例: 基于一个选项设置小部件元素的背景颜色。 _create: function() { this.element.css( "background-color", this.options.color ); } |
_delay( fn [, delay ] ) | Number | 在指定延迟后调用提供的函数。保持 this 上下文正确。本质上是 setTimeout() 。使用 clearTimeout() 返回超时 ID。
代码实例: 100 毫秒后在小部件上调用 this._delay( this._foo, 100 ); |
_destroy() | jQuery (plugin only) | 公共的 destroy() 方法清除所有的公共数据、事件等等。代表了定制、指定小部件、清理的 _destroy() 。
代码实例: 当小部件被销毁时,从小部件的元素移除一个 class。 _destroy: function() { this.element.removeClass( "my-widget" ); } |
_focusable( element ) | jQuery (plugin only) | 建立聚焦在元素上时要应用 ui-state-focus class 的 element 。
代码实例: 向小部件内的一组元素应用 focusable 样式: this._focusable( this.element.find( ".my-items" ) ); |
_getCreateEventData() | Object | 所有的小部件触发 create 事件。默认情况下,事件中不提供任何的数据,但是该方法会返回一个对象,作为 create 事件的数据被传递。
代码实例: 向 _getCreateEventData: function() { return this.options; } |
_getCreateOptions() | Object | 该方法允许小部件在初始化期间为定义选项定义一个自定义的方法。用户提供的选项会覆盖该方法返回的选项,即会覆盖默认的选项。
代码实例: 让小部件元素的 id 属性作为选项可用。 _getCreateOptions: function() { return { id: this.element.attr( "id" ) }; } |
_hide( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效隐藏一个元素。如需了解可能的 option 值,请查看 hide 。
代码实例: 为自定义动画传递 this._hide( this.element, this.options.hide, function() { // Remove the element from the DOM when it's fully hidden. $( this ).remove(); }); |
_hoverable( element ) | jQuery (plugin only) | 建立悬浮在元素上时要应用 ui-state-hover class 的 element 。事件处理程序在销毁时自动清理。
代码实例: 当悬浮在元素上时,向元素内所有的 this._hoverable( this.element.find( "div" ) ); |
_init() | jQuery (plugin only) | 小部件初始化的理念与创建不同。任何时候不带参数的调用插件或者只带一个选项哈希的调用插件,初始化小部件。当小部件被创建时会包含这个方法。
注释:如果存在不带参数成功调用小部件时要执行的逻辑动作,初始化只能在这时处理。
代码实例: 如果设置了 _init: function() { if ( this.options.autoOpen ) { this.open(); } } |
_off( element, eventName ) | jQuery (plugin only) | 从指定的元素取消绑定事件处理程序。
代码实例: 从小部件的元素上取消绑定所有 click 事件。 this._off( this.element, "click" ); |
_on( [suppressDisabledCheck ] [, element ], handlers ) | jQuery (plugin only) | 授权通过事件名称内的选择器被支持,例如 "click .foo" 。 _on() 方法提供了一些直接事件绑定的好处:
代码实例: 放置小部件元素内所有被点击的链接的默认行为。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); } }); |
_setOption( key, value ) | jQuery (plugin only) | 为每个独立的选项调用 _setOptions() 方法。小部件状态随着改变而更新。
代码实例: 当小部件的 _setOption: function( key, value ) { if ( key === "width" ) { this.element.width( value ); } if ( key === "height" ) { this.element.height( value ); } this._super( key, value ); } |
_setOptions( options ) | jQuery (plugin only) | 当调用 option() 方法时调用,无论以什么形式调用 option() 。如果您要根据多个选项的改变而改变处理器密集型,重载该方法是很有用的。
代码实例: 如果小部件的 _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(); } } |
_show( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效显示一个元素。如需了解可能的 option 值,请查看 show 。
代码实例: 为自定义动画传递 this._show( this.element, this.options.show, function() { // Focus the element when it's fully visible. this.focus(); } |
_super( [arg ] [, ... ] ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有任意指定的参数。本质上是 .call() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._super( key, value ); } |
_superApply( arguments ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有参数的数组。本质上是 .apply() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._superApply( arguments ); } |
_trigger( type [, event ] [, data ] ) | Boolean | 触发一个事件及其相关的回调。带有该名称的选项与作为回调被调用的类型相等。 事件名称是小部件名称和类型的小写字母串。 注释:当提供数据时,您必须提供所有三个参数。如果没有传递事件,则传递 如果默认行为是阻止的,则返回
代码实例: 当按下一个键时,触发 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) | 完全移除小部件功能。这会把元素返回到它的预初始化状态。
代码实例: 当点击小部件的任意锚点时销毁小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.destroy(); } }); |
disable() | jQuery (plugin only) | 禁用小部件。
代码实例: 当点击小部件的任意锚点时禁用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.disable(); } }); |
enable() | jQuery (plugin only) | 启用小部件。
代码实例: 当点击小部件的任意锚点时启用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.enable(); } }); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 获得 this.option( "width" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前小部件选项哈希。
代码实例: 记录每个小部件选项的键/值对,用于调试。 var options = this.option(); for ( var key in options ) { console.log( key, options[ key ] ); } |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的小部件选项的值。
代码实例: 设置 this.option( "width", 500 ); |
option( options ) | jQuery (plugin only) | 为小部件设置一个或多个选项。
代码实例: 设置 this.option({ width: 500, height: 500 }); |
widget() | jQuery | 返回一个包含原始元素或其他相关的生成元素的 jQuery 对象。
代码实例: 当创建小部件时,在小部件的原始元素周围放置一个红色的边框。 _create: function() { this.widget().css( "border", "2px solid red" ); } |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | widgetcreate | 当小部件被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的小部件: $( ".selector" ).widget({ create: function( event, ui ) {} }); 绑定一个事件监听器到 widgetcreate 事件: $( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); |