Widget Factory
全てのjQuery UI ウィジットとで使用されているものと同じ基盤となる仕組みを使用して、jQueryプラグインを作成することが出来ます。
$.widget( name [, base ], prototype )
キー | 説明 |
---|---|
name |
型: 名前空間を含む、生成するウィジットの名前を指定します。 |
base |
型: 継承するベースとなるウィジットを指定します。 これは"new"によってインスタンス化できるコンストラクタでなくてはなりません。 デフォルトはjQuery.Widgetになっています。 |
prototype |
型: ウィジットのためのプロトタイプとして使用するオブジェクトを指定します。 |
$.Widgetオブジェクトを継承して、新しいウィジットを作成することが可能です。 また、存在するjQuery UIやサードパーティのウィジットを継承することも可能です。
継承先と同じ名前のウィジットを定義することで、所定の位置にウィジットを拡張することが出来ます。
jQuery UIの状態を維持するため、典型的なjQueryプラグインとは若干異なる使用パターンを持っている
ウィジェットが多く含まれています。
全てのjQuery UIのウィジットは同じパターンを使用し、それはwidget factoryによって定義されています。
そのため、もし1つのウィジットの使用方法を学ぶのであれば、それは全てのウィジットの使用方法を学ぶことに繋がります。
※注:このドキュメントでは、例としてプログレスバーを取り上げますが、 記法は全てのウィジットで共通です。
初期化
ウィジェットの状態を追跡するために、ウィジェットの完全なライフサイクルを把握する必要があります。 ウィジェットが初期化された時にライフサイクルが開始されます。 ウィジェットを初期化するには、単に1つまたは複数の要素に対して、プラグインを呼び出します。
$( "#elem" ).progressbar();
この場合、"elem"というid属性を持つ要素のjQueryオブジェクト内の各要素が初期化されます。 引数無しでprogressbar()を呼び出したため、ウィジットはデフォルトのオプションで初期化されます。 デフォルトのオプションを上書きするために、初期化時にオプションのセットを渡すことが出来ます。
$( "#elem" ).progressbar({ value: 20 });
初期化時に必要なだけオプションを渡すことができますが、 いくつかの渡す事が出来ないオプションは、初期値が使用されます。
オプションはウィジットの状態の一部で、初期化の後にoptionメソッドを使って設定することが可能です。
メソッド
ウィジェットが初期化されると、その状態を参照または上でウィジェットを操作することが出来ます。 全てのアクションは初期化後に、メソッド呼び出しの型を取ります。 ウィジット上でメソッドを呼び出すために、メソッド名をjQueryプラグインに渡します。 例えば、プログレスバー・ウィジットのvalue()メソッドを呼び出すためには、次のようにします。
$( "#elem" ).progressbar( "value" );
もし、メソッドが引数を受け付ける場合、メソッド名の後にそれを渡すことが出来ます。 例えば、value()メソッドに引数として40を渡す場合は、次のようにします。
$( "#elem" ).progressbar( "value", 40 );
jQueryのメソッドのように、多くのウィジットのメソッドはメソッドチェーンのためにjQueryオブジェクトを返します。
$( "#elem" )
.progressbar( "value", 90 )
.addClass( "almost-done" );
各ウィジットは、widgetから提供された機能がベースとなった独自のメソッドのセットを持っています。 しかし、以下に記載されているメソッドの中には、全てのウィジットに存在するメソッドもあります。
イベント
すべてのウィジェットには、状態が変更された事を通知するように、様々な動作に関連付けられているイベントがあります。 ほとんどのウィジットで、イベントがトリガされた際のイベント名に、プレフィックスとしてウィジット名が付けられています。 例えば、プログレスバーの値が変更される度にトリガされるchangeイベントを、下記のように登録することが出来ます。
$( "#elem" ).bind( "progressbarchange", function() {
alert( "値が変更されました!" );
});
各イベントはオプションとして公開され、対応するコールバックを持っています。 progressbarchangeイベントを登録する代わりに、次のようにchangeコールバックをフックさせることが出来ます。
$( "#elem" ).progressbar({
change: function() {
alert( "値が変更されました!" );
}
});
全てのウィジットは、インスタンス化される際にトリガされるcreateイベントを持っています。
オプション | 説明 |
---|---|
disabled |
trueを指定すると、jQueryウィジェットを無効にします。
型: |
hide |
hideアニメーションの指定をします。
型: |
show |
showアニメーションの指定をします。
型: |
メソッド | 説明 |
---|---|
_create() | _create()メソッドは、ウィジェットのコンストラクタに該当します。 受け取るパラメータはありませんが、this.elementとthis.optionsがすでに設定されていて参照が可能です。 |
_delay(fn [,delay]) 1.9追加 |
戻り値:Number 指定された遅延時間後に与えられた関数を呼び出します。 clearTimeout()で使用するためのタイムアウトIDを返します。 |
_destroy() 1.9追加 |
パブリックのdestory()メソッドは全ての共通データ、イベント等をクリーンアップし、
その後にウィジェット固有のクリーンアップ処理を_destory()メソッドに委任します。
|
_focusable (element) 1.9追加 |
フォーカスとui-state-focusクラスを適用する要素を指定します。 このイベントハンドラはdestoryメソッドにより自動的に削除されます。 |
_getCreate EventData() 1.9追加 |
戻り値: 全てのウィジェットはcreateイベントをトリガします。 初期状態であれば、そのイベントでの戻り値はありませんが、このメソッドによって createイベントデータをオブジェクトとして返すことが可能です。 |
_getCreate Options() |
戻り値: ウィジェットがインスタンス化される際に、オプションを定義するためのカスタムメソッドを定義することができます。 デフォルトのオプションを上書きしたものが返されます。 |
_hide (element, option [, callback ]) 1.9追加 |
組み込みエフェクト、またはカスタムエフェクトを使用して要素を表示します。 |
_hoverable ( element ) 1.9追加 |
ホバーとui-state-hoverクラスを適用する要素を指定します。 このイベントハンドラはdestoryメソッドにより自動的に削除されます。 |
_init() |
ウィジェットは、createとは別に初期化の概念があります。
プラグインは、引数無し、または1つのオプションハッシュを引数として呼び出され、
ウィジェットの作成中にこの処理が含まれます。 ※翻訳に自信無し 注:引数なしでウィジットのために連続的な処理が必要な場合、初期化時に行うべきです。 |
_off ( element, eventName ) 1.9追加 |
特定の要素(群)のイベントハンドラを削除します。 |
_on ([element], handlers) 1.9追加 |
特定の要素(群)にイベントハンドラを登録します。
デリゲーションには、セレクタを介した内部イベント名(例:"click .foo")がサポートされます。
_on()メソッドは幾つかの利点をもたらしてくれます。
|
_setOption (key, value) |
_setOptions()メソッドによってそれぞれ個別に呼び出されるメソッドです。 ウイジェットの状態はこの変更を元に更新されるべきです。 |
_setOptions (options) |
option()メソッド(呼び出しの型に関係なく)が呼び出される度に、実行されるメソッドです。 (※翻訳に自信無し)複数のオプションを変更するために、集中的な処理を遅らせることが出来る場合に上書きすると便利です。 |
_show (element, option [, callback ]) 1.9追加 |
組み込みエフェクト、またはカスタムエフェクトを使用して要素を表示します。 |
_super() 1.9追加 |
任意の指定された引数を使用し、親ウィジェットから同じ名前のメソッドを呼び出します。 本質的には、.call()メソッドになります。 |
_superApply ( arguments ) 1.9追加 |
任意の指定された引数を使用し、親ウィジェットから同じ名前のメソッドを呼び出します。 本質的には、.apply()メソッドになります。 |
_trigger ( type [, event ] [, data ] ) |
イベントをトリガします。 typeに指定したイベントが、コールバック関数のように呼び出されます。 イベント名は「ウィジット名+type」になります。 dataを提供する場合は、3つの引数を指定する必要があります。 eventが無いのであればnullを指定してください。 |
メソッド | 説明 |
---|---|
destroy() | jQueryウィジットの機能を完全に除去します。 戻り値は初期状態の要素になります。 |
disable() | jQueryウィジットを無効化します。 |
enable() | jQueryウィジットを有効化します。 |
option( optionName ) |
戻り値: optionNameに指定したオプションの現在の値を取得します。 |
option() |
戻り値: オプションの各キーと値がペアとなったオブジェクトを返します。 |
option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。 |
option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 |
イベント | 説明 |
---|---|
create( event, ui ) |
型: ウィジットが作成される際にトリガされます。
|
© 2010 - 2017 STUDIO KINGDOM