ウィジェットライブラリの拡張を介してのjQuery UIウィジェット

jQueryのUIウィジェットライブラリ（ウィジェットファクトリー）は、これらのウィジェットは、既存のウィジェットの機能を拡張し、それが簡単にウィジェットを作成することができます。 既存の強力なウィジェットに基づいて作成することができますこのように、あなたはまた、既存のウィジェット機能の微調整を行うことができます。

注：この章を研究する前に、あなたがウィジェットライブラリ（ウィジェットファクトリー）、そしてどのようにそれが動作するかを理解する必要があります。 あなたはこの知識に精通していない場合、そのように確認してください部品ライブラリ（ウィジェットファクトリー）の使用方法のセクションを。

ウィジェットの拡張機能を作成します。

通ってウィジェット・ライブラリー（ウィジェットファクトリー）によってウィジェットを作成します$.widget()ウィジェットと完了するためにプロトタイプオブジェクトの名前が渡されます。 次の例では、「カスタム」名前空間の「superDialog」ウィジェットを作成することです。

$.widget( "custom.superDialog", {} );

展開をサポートするために、 $.widget()オプションは、親ウィジェットのコンストラクタを使用するには、メンバーとして受け入れました。 それはウィジェットのプロトタイプオブジェクトの前に、第二引数、背面のウィジェット名として渡されたときに親メンバーを指定する場合。

上記の例のように、次はまた、「カスタム」名前空間に "superDialog」ウィジェットを作成する必要があります。 しかし、この転送は、 jQueryのUIのダイアログ（対話）ウィジェットのコンストラクタ（ $.ui.dialog ）、親メンバーとしてのjQuery UIのダイアログ（対話）ウィジェットを使用する必要がありsuperDialogウィジェットを表します。

$.widget( "custom.superDialog", $.ui.dialog, {} );

ここでは、superDialog 2、ダイアログのウィジェットは、単に別の名前と名前空間のみ本質的に等価です。 私たちの新しいウィジェット、より多くの機能のためのために、我々は、そのプロトタイプオブジェクトにいくつかのメソッドを追加することができます。

ウィジェットプロトタイプオブジェクトはに渡される$.widget()最後の引数。 これまでのところ、私たちの例では、nullオブジェクトを使用しています。 今度は、オブジェクトにメソッドを追加してみましょう。

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

今superDialog持っているred()そのテキストの色を赤に変更するメソッドを、。 会員図書館（ウィジェットファクトリー）が自動的に設定する方法であることに注意してくださいthisウィジェットインスタンスオブジェクトとして。 インスタンスで使用可能なすべてのプロパティとメソッドの一覧については、訪問会員図書館（ウィジェットファクトリー）APIドキュメントを 。

既存の方法を拡張

時には、あなたは、既存のコンポーネントの動作を調整したり、メソッドを追加する必要があります。 あなたは、オブジェクトが再ロードする必要があるプロトタイプのメソッドのメソッド名の名前を指定することができます。 次の例は、のダイアログ（対話）より優先されますopen()メソッドを 。 ダイアログボックスは、デフォルトで有効になっているため、このコードを実行すると、 "open"ことが記録されます。

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

このコードを実行すると、問題があります。 我々はオーバーロードされないためopen()デフォルトの動作をするので、ダイアログ（対話）は、もはや画面上に表示されます。

我々は、プロトタイプオブジェクトを使用する場合、我々は実際にプロトタイプチェーン内の新しいメソッドを使用して、元のメソッドをオーバーラップしています。

-アセンブリ方法が利用可能である親のためのためには、会員ライブラリ（ウィジェットファクトリー）は二つの方法提供_super()と_superApply()

使用_super()と_superApply()親メンバーにアクセスするには、

_super()と_superApply()親コンポーネントと同じように呼び出します。 次の例を考えてみましょう。 オーバーロードされた最後のインスタンス、などのopen()記録する方法"open" 。 しかし、この実行_super()のダイアログ（対話）と呼ばれるopen()および[開く]ダイアログボックス。

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super()と_superApply() 、元と事実上同一であるFunction.prototype.call()とFunction.prototype.apply()メソッド。 したがって、 _super()パラメータのリストを受け付け、 _superApply()のパラメータとして配列を受け付けます。 次の例では、2つの間で異なることを示しています。

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

ウィジェットを再定義

jQueryのUI 1.9は、ウィジェットの機能を再定義追加しました。 したがって、新しいウィジェットを作成することはできません、我々は唯一合格する必要が$.widget()ように、既存のウィジェット名とコンストラクタ。 で、次の例open()ではなく、完了するために、新しいウィジェットを作成することによって、同じレコードを追加します。

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

この方法を通じて、我々は、既存の方法の小さな部分を拡張することができますが、あなたはまだ使用することができます_super()元のメソッドにアクセスすること-これらは完了するために、新しいウィジェットを作成することではありませんが、それは直接ウィジェットを再定義されていますことができます。

ウィジェット（ウィジェット）と多型（多型）

その時間と対話するためにウィジェットとプラグインとの間の拡張時には、プラグ部材は、親メソッドサブアセンブリの要素を呼び出すために使用することができないことは注目に値します。 次の例では、このことを示しています。

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

上記の例として、プラグインの親メンバー、 dialog()あなたは上のsuperDialog要素を呼び出すことはできませんclose()メソッドを。 詳細については、ウィジェットのメソッドを呼び出して参照してウィジェット（ウィジェット）メソッド呼び出しを 。

パーソナライズされたカスタムの例

これまでのところ、我々は、ウィジェットのプロトタイプの拡張メソッドのインスタンスを見てきました。 プロトタイプではオーバーロードされたメソッドは、ウィジェットのすべてのインスタンスに影響を与えます。

この点を説明するために、次の例を考えてみましょう。 ダイアログ（対話）二つの力は同じ使用しているopen()メソッドを。

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

時には、あなただけのウィジェットのインスタンスの動作を変更する必要があります。 これを行うには、あなたは、通常の属性の割り当てはJavaScriptを使用してインスタンスへの参照を取得し、このメソッドをオーバーライドする必要があります。 具体例としては、以下に示します。

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

オーバーロード技術パーソナライゼーションは、ワンタイムのカスタマイズの完璧な例です。