jQuery UI 1.9以降では、ウィジェットの拡張は、新しいウィジェットの作成と同じ方法で行われます。ウィジェットファクトリ($.widget()
)は、いくつかのシナリオをサポートしています。
ベースウィジェット($.Widget
)を開始点として使用して新しいウィジェットを作成します。
$.widget( "ns.widget", { ... } )
既存のウィジェットから継承する新しいウィジェットを作成します。
$.widget( "ns.widget", $.ns.existingWidget, { ... } )
ウィジェットの拡張:
$.widget( "ns.widget", $.ns.widget, { ... } )
拡張構文と継承構文が同じであることに気付くでしょう。ウィジェットファクトリは、作成しているウィジェットと継承しているウィジェットが同じであり、適切に処理していることに気付くほど賢いです。
ウィジェットを継承または拡張する場合、変更または追加するものを定義するだけで済みます。継承とコンテキストを変更するメソッドの操作を容易にするために、ベースウィジェットに存在するいくつかの新しいメソッドもあります。メソッドとその説明の完全なリストについては、 jQuery.Widgetのドキュメントをお読みください。ウィジェットを拡張する場合は、_super()について必ず読んでください。
delay
これは、デフォルトのオプションをに変更し、すべての提案に追加される500
新しいオプションを追加する例です。prefix
$.widget( "ui.autocomplete", $.ui.autocomplete, {
options: {
delay: 500,
prefix: ""
},
_renderItem: function( ul, item ) {
var label = item.label;
if ( this.options.prefix ) {
label = this.options.prefix + " " + label;
}
return $( "<li>" )
.append( $( "<a>" ).text( label ) )
.appendTo( ul );
},
});