jQueryのUIウィジェットライブラリを使用する方法

私たちは、プログレスバーを作成します。 呼び出すことにより、以下の例に示すように、 jQuery.widget()完了するために、それは2つのパラメータを取ります：プラグイン名が作成される、オブジェクトが含まれているテキストは、プラグインのサポートの関数です。 プラグが呼び出されると、それが新たなプラグインのインスタンスを作成し、すべての関数は、この例のコンテキストで実行されます。 この二つの重要な方法の異なる標準のjQueryプラグイン。 まず、コンテキストは、オブジェクトではなく、DOM要素です。 第二に、コンテキストは常に単一のオブジェクトではなく、コレクションです。

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

プラグインの名前空間の名前が含まれている必要があり、この例では、我々が使用するcustom名前空間を。 あなたが一層のみの深い名前空間を作成することができ、したがって、 custom.progressbar名前、有効でプラグイン、あるvery.custom.progressbarない有効なプラグイン名。

我々は、部品ライブラリ（ウィジェットファクトリー）は、2つのプロパティを提供してくれました。 this.element 1種の元素を含むjQueryオブジェクトです。 我々は複数の要素が含まれているjQueryのプラグインオブジェクトを呼び出す場合は、各要素ごとに別々のプラグインのインスタンスを作成し、各インスタンスには、独自の必要がありますthis.element 。 第二の特性は、 this.options 、プラグインのオプションは、すべてのキーの名前/値のペアのハッシュ（ハッシュ）などがあります。 次のようにこれらのオプションは、プラグインに渡すことができます。

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

我々は呼び出すとjQuery.widget()与えることによって、 jQuery.fn （標準プラグインシステムを作成するために使用される）をjQueryのを拡張する機能を追加します。 関数名は、ご使用のパスに基づいて追加されjQuery.widget() 「プログレスバー」 -名前空間を持たない名前。 プラグパスオプションは、プラグインのインスタンスに設定された値を得ることです。 次の例に示すように、我々はすべてのオプションにデフォルト値を指定することができます。 あなたのAPIを設計するとき、あなたが適切なデフォルトを設定し、すべてのオプションが本当にオプションのことを保証することができるので、あなたは、あなたのプラグインの最も一般的な使用に注意する必要があります。

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

プラグインのメソッドを呼び出します

今、私たちは私たちのプログレスバーを初期化することができ、我々はプラグインのインスタンスのメソッドを呼び出すことでアクションを実行します。 プラグインのメソッドを定義するために、我々は唯一の私たちは合格jQuery.widget()関数オブジェクトへの参照を。 また、アンダースコアの接頭辞を持つ関数名に「プライベート」メソッドを定義することができます。

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

プラグインのインスタンスのメソッドを呼び出すには、jQueryのプラグインにメソッドの名前を渡すことができます。 あなたはパラメータを受け入れるようにメソッドを呼び出す場合は、単にこれらのパラメータの後ろにメソッド名を渡します。

注：jQueryの機能は、方法を実行するプラグインを初期化するために使用したものと同じメソッド名に渡されます。 これは、チェーンのメソッド呼び出しを維持しながら、jQueryの名前空間の汚染を防ぐために行われます。 以降の章では、我々は他の用途がより自然に見える表示されます。

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

オプションを使用します

option()メソッドは、自動的にプラグインに提供されます。 option()メソッドを使用すると、初期化後のオプションを取得および設定することができます。 jQueryのよう法.css()と.attr()メソッド：引数が使用するようにあなただけの名前を渡すことができ、あなたはまた、キー名/値のペアを使用するか、または渡すセットとして名前と値を渡すことができます複数の値を設定するためにハッシュ。 値として使用する場合、プラグインは現在の値を対応する入力オプションの名前を返します。 セッターとして使用する場合、ウィジェット_setOption各オプションが設定されている方法が呼び出されます。 当社は、当社では、プラグインを指定することができ_setOptionオプションの変更を反映する方法。 独立して実行するアクションのオプションを変更し、我々はオーバーライドでき_setOptions 。

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

コールバックを追加します。

最も単純な拡張は変更は、プラグインの状態で発生した場合、ユーザーが反応できるようにコールバックを追加することです。 私たちは、プログレスバーが100％に達したときにプログレスバーにコールバックを追加する方法の以下の例で見ることができます。 _trigger()コールバックの名前のコールバックjQueryのイベントは、オブジェクトを開始し、イベントに関連するデータのハッシュ：方法は3つの引数をとります。 コールバック名が唯一の必須パラメータですが、カスタムを実装したいことは、プラグインのユーザーを備え、他のパラメータは非常に便利です。 我々はドラッグ可能なプラグインを作成する場合、ユーザーがドラッグのX / Y座標によって提供されたオブジェクトに基づいて、イベントに応答することを可能にするコールバックを、トリガされたとき例えば、我々はのMouseMoveドラッグイベントを渡すことができます。 渡されますのでご注意ください_trigger()代わりにネイティブブラウザイベントのjQueryのイベントでなければならないオリジナルのイベントで。

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

基本的にコールバック関数だけ追加オプション、あなたは他のオプションと同じように取得し、それらを設定することができるように。 たびにコールバックは、トリガされ、対応するイベントがあります。 イベントタイプは、名前および接続プラグを決定するために、コールバック関数の名前です。 次の例に示す特にように、イベントオブジェクトおよびイベントに関連付けられたデータのハッシュ：コールバックとイベントが同じ2つの引数を受け入れます。 あなたがこれを行うためには、ユーザーを防ぐために、プラグインの機能を含める必要があり、最良の方法は、あなたがコールバックを取り消すことができるの愛を作成することです。 ユーザーのコールバックを取り消すか、ネイティブに関連するイベントが彼らと任意のイベントを取り消すことができ、それらが呼び出すことであるevent.preventDefault()または戻りfalse達成します。 あなたがコールバックを取り消すと、 _trigger()メソッドが返されますfalse 、あなたはプラグインで適切な機能を実現することができます。

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

ネイチャー

今、私たちは、プラグインを作成するために、ウィジェットライブラリ（ウィジェットファクトリー）を使用するのは、それが実際にどのように動作するかを見てみましょうする方法を見てきました。 お問い合わせの際jQuery.widget()それはプラグインのコンストラクタ関数を作成し、プラグインのインスタンスを設定プロトタイプオブジェクトとして渡されます。 すべての機能は自動的にウィジェットに追加されるように定義された基本的なウィジェットプロトタイプ、から来ているjQuery.Widget.prototype 。 あなたはプラグインのインスタンスを作成するときに使用されますjQuery.dataプラグイン名キー名として、元のDOM要素に格納し、それを。

直接DOM要素にリンクされているプラ​​グインのインスタンスので、あなたは直接プラグインの方法を横断する必要なく、プラグインのインスタンスにアクセスすることができます。 この方法では、文字列のメソッド名を渡す必要なく、プラグインのインスタンスに直接呼び出し、およびプロパティをもアクセスすることができます直接接続することができます。

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

また、トラバース法なしでプラグインのインスタンスを作成することができ、およびオプションは、コンストラクタの要素を直接呼び出すために：

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

プロトタイプの拡張

ウィジェットのコンストラクタとプロトタイプ最大の利点は、簡単に拡張機能です。 メソッドプラグプロトタイプを追加または変更することにより、我々はすべてのインスタンスのウィジェットの動作を変更することができます。 我々は0％の進捗にリセットするプログレスバーにメソッドを追加したい場合たとえば、私たちはすべてのプラグインのインスタンスで呼び出されるプロトタイプ、このメソッドを追加することができます。

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

詳細については、拡張されたウィジェットのために、どのように参照して、既存のウィジェットの詳細は上の新しいウィジェットを作成する会員図書館（ウィジェット工場の）によって拡張されたウィジェット（ウィジェット） 。

片付けます

いくつかのケースでは、アプリケーションは、ユーザがプラグインすることができ、その後、アプリケーションを取り消します。 あなたがすることができます_destroy()この方法を行うこと。 で_destroy()メソッド内には、初期化や使用後のプラグインが実行中にすべてのアクションを取り消す必要があります。 _destroy()によって.destroy()メソッドが呼び出され、 .destroy()メソッドは、プラグインのインスタンスに自動的に呼び出さDOMバインディングから要素を削除しているので、ガベージコレクションのために使用することができます。 ベーシック.destroy()方法はまた、一般的にそのようなウィジェットのインスタンスからDOM要素を削除するなど、いくつかのクリーンアップ操作に対処するために使用される要素からすべてのイベントは、すべてのアンバインドを使用、バインド解除ウィジェットの名前空間を引用した_bind()イベントを追加。

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

閉じるノート

コンポーネントライブラリ（ウィジェットファクトリー）は、プラグの状態を作成する方法です。 用いることができる他の異なるモデルは、それぞれが独自の利点と欠点を有します。 コンポーネントライブラリ（ウィジェットファクトリー）は、多くの一般的な問題を解決し、効率を大幅に向上するだけでなく、大幅にjQueryのUIとプラグインの他の状態に適して、コードの再利用性を高めます。

このセクションでは、我々が使用することに注意してくださいcustom名前空間を。 ui名前空間には、公式のjQuery UIのプラグインを予約されています。 独自のプラグインを作成するときは、独自の名前空間を作成する必要があります。 範囲に属する場合に、プラグからより明確にするように。