jQueryのUIのAPI - パーツギャラリー(ウィジェットファクトリー)
カテゴリ
ユーティリティ(ユーティリティ) | ウィジェット(ウィジェット)
jQuery.widget(名[、ベース]、プロトタイプ)使用法
説明:ステートフルなjQueryプラグインを作成するために、同じ抽象概念を持つすべてのjQuery UIウィジェットを使用。
参数 | 类型 | 类型 |
---|---|---|
name | String | 要创建的小部件名称,包括命名空间。 |
base | Function() | 要继承的基础小部件。必须是一个可以使用 `new` 关键词实例化的构造函数。默认为 jQuery.Widget。 |
prototype | PlainObject | 要作为小部件原型使用的对象。 |
あなたが使用することができます$.Widget
継承の基礎になどのオブジェクトを、または新しいウィジェットスクラッチから作成された既存のサードパーティ製のコントロールから明示的またはjQueryのUIであってもよいです。 同じ名前を持つウィジェットの定義は、ベース部材を継承し、さらにはあなたが適切ウィジェットを拡張することができます。
jQueryのUIは、典型的なjQueryのは、わずかに異なる使用パターンをプラグインよりもので多くは、小さな部品を保持含まれています。 会員図書館(ウィジェットファクトリー)の定義で構成されている同じモデルを使用して、すべてのjQuery UIウィジェット。 だから、限り、あなたはいずれかを使用する方法を学ぶように、あなたは他のウィジェット(ウィジェット)を使用する方法を知っています。
注:このセクションでは、使用してプログレスバーのメンバー(プログレスバーウィジェット)デモをするが、構文は各ウィジェットに適用されます。
初期化
ウィジェットの状態を追跡するために、我々は、ウィジェットのライフサイクル全体を導入する必要があります。 ライフサイクルは、ときに、ウィジェットの初期化を開始します。 ウィジェットを初期化するために、我々は単にコールまたは複数の要素をプラグインする必要があります。
$( "#elem」).progressbar();
これは、各要素のjQueryオブジェクトを初期化します。 IDを持つ上記の要素の例"elem"
。
オプション
以来progressbar()
を呼び出すパラメータなしで、ウィジェットはデフォルトのオプションを使用して初期化されます。 我々は、初期化オプションでデフォルトをオーバーライドするオプションのセットを渡すことができます。
$( "#elem」).progressbar({値:20});
我々は、いずれかのオプションがデフォルト値を使用するようにしている合格しなかった、オプションの数に応じて渡す必要があります。
あなたは(のような1つのオブジェクトにマージされるパラメータの複数のオプション渡すことができ$.extend( true, target, object1, objectN )
)。 この数は、すべてのインスタンスをカバーするように設定され、インスタンスのオプション間での共有に便利です:
varの各オプション= {モーダル:真、ショー: "遅いです"}; $( "#Dialog1の」).dialog(オプション)。 $( "#のDialog2」).dialog(オプション、{AutoOpenマクロ:偽});
すべてのオプションがオブジェクトを変更する例小さな部分に影響を与えないのフォローアップを確保、初期化のディープコピー中に配信されます。 彼らは、参照によるものであるように、アレイは、唯一の例外です。 これに対する例外は、適切にデータソースが基準として使用されなければならない、データバインディングをサポートするためです。
デフォルト値は、ウィジェットのプロパティに格納されているので、jQueryのUI設定の値をカバーすることができます。 たとえば、次のように設定した後、プログレスバーの将来のすべてのインスタンスが値80にデフォルト設定されます:
$ .ui.progressbar.prototype.options.value = 80;
オプションは、小さな加盟国の一部であるので、我々はまた、初期化後のオプションを設定することができます。 私たちは、その後の方法でオプションが表示されます。
ウェイ
今ウィジェットが初期化されている、我々はその状態を照会、またはウィジェットでアクションを実行することができます。 すべてのアクションは初期化メソッドを実行するために呼び出された後に基づいています。 ウィジェットのメソッドを呼び出すために、我々はjQueryのプラグインにメソッドの名前を渡します。 例えば、プログレスバーのメンバー(プログレスバーウィジェット)に呼びかけvalue()
メソッド、我々が使用することができます。
$( "#elem」).progressbar("値 ");
この方法は、パラメータを取る場合、私たちは、メソッド名の後にパラメータを渡すことができます。 たとえば、パラメータ渡すために40
しvalue()
メソッドを、我々が使用することができます。
$( "#elem」).progressbar("値 "、40);
他の方法でのjQueryのように、ほとんどのウィジェットメソッドはjQueryオブジェクトを返します。
$( "#elem」) .progressbar( "値"、90) .addClass(「ほとんど-行わ ");
各ウィジェットは、ウィジェットによって提供される機能に基づいており、独自の方法の設定を、持っています。 しかし、いくつかの方法があり、以下に詳細に説明する全ての小部分上に存在します。
イベント
すべてのウィジェットは、彼らは状態変化を通知するために、行動に関連した様々なイベントを持っています。 イベントがトリガされた最も小さい部分については、接頭辞としてウィジェット名の形式で小文字に名前を入力します。 例えば、我々はプログレスバーに結合することができるchange
値の変化トリガーされるイベントを、。
$( "#elem」).bind(" Progressbarchange」、関数(){ 警告( "値が変更されました!"); });
各イベントは、オプションとして対応するプルバックを、持っています。 必要であれば、我々はの進捗状況を把握することができるchange
ではなく結合よりも、コールバックをprogressbarchange
イベントを。
$( "#elem」).progressbar({ 変更:関数(){ 警告( "値が変更されました!"); } });
すべてのウィジェットは、持っているchange
インスタンス化時にトリガーされるイベントを、。
インスタンス化
ウィジェットの例としては、キーのような小さな部分と完全な名前を使用することですjQuery.data()
店。 したがって、あなたは、プログレスバーのメンバー(プログレスバーウィジェット)インスタンスオブジェクトを取得するには、この要素から、次のコードを使用することができます。
$( "#elem」).dataセクション(「UI-プログレスバー");
要素が与えられたウィジェットのためにバインドされているかどうかは、使用することができます:data
選択を検出すること。
$( "#elem")( ":データ(「UI-プログレスバー ')").is; //真 $( "#elemは")( ":データ(「UI-ドラッグ可能に ')").is; //偽
使用することもでき:data
すべての要素の一例として与えられたウィジェットのリストを取得します。
$( ":データ(「UI-プログレスバー ')");
プロパティ
すべてのウィジェットは、次の属性があります。
- defaultElement:要素に使用するウィジェットのインスタンスを使用できません要素を構築します。 例えば、プログレスバーため
defaultElement
ある"<div>
"、$.ui.progressbar({ value: 50 })
新しい内<div>
プログレスバーウィジェットのインスタンスのインスタンスでは。 - ドキュメント:要素内の小さな部品が含まれ
document
。 便利なウィジェットの枠組みの中で対話する必要がある場合。 - 要素:ウィジェットをインスタンス化するために使用される要素が含まれているjQueryオブジェクト。 あなたが複数の要素を選択して呼び出す場合
.myWidget()
には、各要素の1つのウィジェットのインスタンスを作成します。 したがって、プロパティは常に要素が含まれています。 - 名前空間:ロケーションウィジェットプロトタイプストアグローバルjQueryオブジェクト。 たとえば、
"ui"
namespace
小さな試作部品を内に格納されている表す$.ui
。 - オプション:オブジェクトを使用するオプションは、現在のウィジェットが含まれています。 インスタンス化されると、ユーザによって提供されるオプションのいずれかが自動的になり、
$.myNamespace.myWidget.prototype.options
定義されたデフォルト値をマージします。 ユーザーが指定したオプションは、デフォルト値を上書きします。 - UUID:ユニークな整数の識別子が制御を示しています。
- バージョン:ウィジェットの文字列バージョン。 jQueryのUIウィジェットの場合、プロパティは使用のjQuery UIウィジェットのバージョンに設定されます。 プラグイン開発者が明示的にそのプロトタイプのプロパティを設定する必要があります。
- widgetEventPrefix:イベントのプレフィックス名にウィジェットを追加します。 例えば、 (ドラッグ可能なウィジェット)ウィジェットをドラッグ&ドロップすることができますの
widgetEventPrefix
ある"drag"
、あなたはドラッグ可能なを作成するときに、イベントの名前は"dragcreate"
。 デフォルトでは、ウィジェットwidgetEventPrefix
、その名前です。 注:このプロパティは、非常に将来のリリースでは、放棄されています。 イベント名はwidgetNameに変更されます(のようなイベント名"draggable:create"
)。 - widgetFullName:ウィジェットは、名前空間のフルネームが含まれています。 以下のために
$.widget( "myNamespace.myWidget", {} )
widgetFullName
なります"myNamespace-myWidget"
。 - widgetName:ウィジェットの名前。 以下のために
$.widget( "myNamespace.myWidget", {} )
widgetName
なります"myWidget"
。 - ウィンドウ:それは要素の中に小さな部品が含まれ
window
。 便利なウィジェットの枠組みの中で対話する必要がある場合。
jQuery.Widget基礎ウィジェットの使用
説明:基本ウィジェットウィジェットライブラリ(ウィジェットファクトリー)使用。
クイックナビゲーション
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |