jQueryのUI作品

jQueryのUIは、したがって、それは典型的なjQueryプラグインは、わずかに異なるパターンを使用している、状態（ウィジェット）を維持するために多くの小さな部品が含まれています。その設置は、jQueryプラグインのほとんどのインストールに似ている、jQueryのUIウィジェットのベースとなって部品ライブラリ（ウィジェットファクトリー）ウィジェットライブラリを作成した共通のAPIを提供します。だから、限り、あなたはいずれかを使用する方法を学ぶように、あなたは他のウィジェット（ウィジェット）を使用する方法を知っています。このチュートリアルであろう（プログレスバー）プログレスバーウィジェットのコード例は、共通の機能について説明します。

インストール

コンポーネントの状態を追跡するために、我々は最初に、ウィジェットの完全なライフサイクルを導入します。ウィジェットがインストールされ、ライフサイクルが開始されたとき。私達はちょうどウィジェットをインストールされている1以上の要素、上のプラグインを呼び出す必要があります。

$( "#elem" ).progressbar();

これは、「ELEM」として要素ID、この場合には、jQueryオブジェクトの各要素を初期化します。我々は、引数なし呼び出すので.progressbar()メソッドを、ウィジェットはその初期化に応じて、デフォルトのオプションです。それはデフォルトのオプションを上書きすることができるように、我々は、インストール時にオプションのセットを渡すことができます。

$( "#elem" ).progressbar({ value: 20 });

インストールオプションの数は、我々のニーズに応じてはるかに合格しました。私たちは、あなたがそれらのデフォルト値を使用するすべてのオプションを渡しませんでした。

オプションは、小さな加盟国の一部であるので、我々はまた、インストール後のオプションを設定することができます。我々は続くoptionこの方法の一部を説明しています。

ウェイ

ウィジェットが初期化されているので、我々はその状態を照会、またはウィジェットでアクションを実行することができます。すべてのアクションは、メソッド呼び出しの形で初期化した後に行われています。ウィジェットのメソッドを呼び出すには、我々は、jQueryのプラグインにメソッドの名前を渡すことができます。例えば、プログレスバー（プログレスバー）ウィジェットにコールするvalue法、我々が使用する必要があります。

$( "#elem" ).progressbar( "value" );

この方法は、パラメータを取る場合、私たちは、メソッド名の後にパラメータを渡すことができます。たとえば、パラメータ渡す40へのvalue方法を、我々が使用することができます。

$( "#elem" ).progressbar( "value", 40 );

他のjQueryのメソッドと同様に、ウィジェットのリンク方法のほとんどは、jQueryオブジェクトを返します。

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

パブリックメソッド

各ウィジェットは、機能ベースのアプローチを提供するウィジェットの独自のセットを持っています。しかし、すべてに共通している方法があるウィジェットです。

オプション

我々は先に述べたように、我々は初期化した後ことができますoption選択方法を変更します。例えば、我々は呼び出すことができますoptionメソッドのプログレスバー（プログレスバー）30の値を変更することを。

$( "#elem" ).progressbar( "option", "value", 30 );

我々は呼び出す前に、これは、注意してくださいvalue異なる方法の例を。この例では、コールoption方法30に値を変更するオプションが。

また、オプションの現在の値を取得することができます。

$( "#elem" ).progressbar( "option", "value" );

また、私たちは与えることができるoption複数のオプションを更新し、オブジェクトのメソッドを渡します。

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

あなたは気づいているかもしれoptionとして、この方法は、jQueryのコード値とセッターと同じフラグを持っている.css()と.attr() 。唯一の違いは、あなたが最初のパラメータとして文字列 "オプション"を通過しなければならないということです。

無効にします

disableウィジェットを無効にする方法を。プログレスバーが無効になっているように、プログレスバー（プログレスバー）の場合において、これは、スタイルを変更します。

$( "#elem" ).progressbar( "disable" );

呼び出しdisableする方法は、設定と同じですdisabledオプションtrue 。

有効にします

enableな方法であるdisable反対のアプローチ。

$( "#elem" ).progressbar( "enable" );

呼び出しenableする方法を設定することと等価であるdisabledオプションfalse 。

破壊します

あなたはもはやウィジェットが必要な場合は、元のマークに戻り、それを破壊することはできません。これは、ウィジェットのライフサイクルが終了することを意味します。

$( "#elem" ).progressbar( "destroy" );

あなたがウィジェットを破壊したら、あなたがウィジェットを再初期化しない限り、あなたは、コンポーネント上の任意のメソッドを呼び出すことはできません。あなたはを通して直接要素を削除したい場合は.remove()することもできます.html()または.empty()の祖先を変更するには、ウィジェットは自動的に破棄されます。

ウィジェット

ラッパー要素または元の要素に接続された要素を生成し、いくつかのウィジェットが切断されています。次の例では、 widget戻り要素を生成しました。プログレスバー（プログレスバー）の例では、ラッパーを生成しない、 widget方法は、オリジナルの要素を返します。

$( "#elem" ).progressbar( "widget" );

イベント

イベントすべてのウィジェットは、状態変化があなたに知らせたときのために、それらに関連する行動の多様性を持っています。イベントがトリガされた最も小さい部分については、接頭辞としてウィジェット名に名前。値の変更がトリガされると、例えば、我々は、変更のプログレスバー（）イベントをバインドすることができます。

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

各イベントは、レンダリングのオプションとして、対応する補正されています。私たちは、プログレスバー（プログレスバー）を使用することができchangeの結合に相当し、コールバック、 progressbarchangeイベントを。

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

公開イベント

ほとんどのイベントは、特定のウィジェットにある、すべてのウィジェットは共通していcreateたイベントを。ウィジェットが作成されたときにイベントがトリガされます。

前：jQueryのUIカスタマイズ

次へ：jQueryのUIのテーマ

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例