Latest web development tutorials
×

jQuery UI コース

jQuery UI コース jQuery UI 簡単な紹介 jQuery UI ダウンロード jQuery UI 使用 jQuery UI カスタマイズ jQuery UI ワークス

jQuery UI テーマ

jQuery UI テーマ jQuery UI ThemeRoller jQuery UI CSS フレーム API jQuery UI デザインテーマ

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

jQuery UI コンポーネントライブラリ jQuery UI 拡張ウィジェット jQuery UI メソッド呼び出しウィジェット jQuery UI なぜウィジェットライブラリを使用 jQuery UI ウィジェットライブラリを使用する方法

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

jQuery UI API ファイル API カテゴリ - 特別に良い効果 API カテゴリ - エフェクトコア API カテゴリ - 交互に API カテゴリ - メソッドのオーバーロード API カテゴリ - ウェイ API カテゴリ - セレクタ API カテゴリ - テーマ API カテゴリ - UI コア API カテゴリ - ユーティリティ API カテゴリ - ウィジェット

jQuery UI 例

jQuery UI 例 ドラッグ 場所 スケーリング 選択します シーケンス 折りたたみパネル オートコンプリート プッシュボタン 日付ピッカー ダイアログ メニュー プログレスバー スライダー 回転子 タブ ツールチップボックス 特別に良い効果 ディスプレイ 隠します 切り替え .addClass() .removeClass() .toggleClass() .switchClass() カラーアニメーション 検索します コンポーネントライブラリ

なぜjQueryのUIウィジェットライブラリを使用

jQueryのプラグインとに書くjQuery.prototype (通常として表示$.fn )単純にメソッドを追加し、このようにリターンのようないくつかの簡単なルール、に従う必要がありthis 。 なぜコンポーネントライブラリ(ウィジェットファクトリー)の存在でしょうか?

このセクションでは、コンポーネントライブラリ(ウィジェットファクトリー)の利点を説明し、それを使用するために、なぜそれを使用するときに学習します。

ステートフルウィジェット対ステートレス

ほとんどのjQueryのプラグインがステートレスで、彼らは自分のタスクを完了するためにいくつかのアクションを実行します。 たとえば、あなたが使用している場合.text( "hello" )要素がテキストに設定されている、何のインストール・フェーズはありません、結果は同じです。 プラグインのこのタイプの場合、それだけでjQueryのプロトタイプを拡張します。

しかし、いくつかのプラグインは、彼らが変更する状況と応答を維持するために、ライフサイクル全体を持って、ステートフルです。 これらのプラグインは初期化状態管理(そして時には破壊)するための特殊なコードの多くを必要とします。 これは、ステートフルなテンプレートを作成するためのプラグインの出現につながりました。 さらに悪いことに、別のプラグインにつながったプラグインのライフ・サイクルおよび状態を管理するためのさまざまな方法で各ウィジェットの著者は、異なるAPIのスタイルを持っています。 コンポーネントライブラリ(ウィジェットファクトリー)は、テンプレートを削除し、プラグインの一貫性のあるAPIを作成し、これらの問題に対処することを意図しています。

一貫性のあるAPI

コンポーネントライブラリ(ウィジェット工場)の方法と同様に、モニタウィジェットのトリガ・イベントを作成し、ウィジェットを破壊し、取得し、オプションを設定し、コールする方法を定義します。 ウィジェット・ライブラリー(ウィジェットファクトリー)を使用して、ステートフルプラグインを作成するには、自動的に新しいユーザーがより簡単にプラグインを使用することができ、標準の定義を満たしています。 また、ウィジェット・ライブラリー(ウィジェットファクトリー)関数は、インターフェイスの定義を可能にします。 あなたはAPIライブラリー(ウィジェットファクトリー)の一部である場合に精通していない提供、チェックアウトライブラリーメンバー(ウィジェットファクトリー)を使用する方法

初期設定で設定したオプション

あなたが受け入れるように、プラグインのオプションを作成するとき、あなたは、多くのオプションがデフォルトを定義する必要があります。 次に初期化で、デフォルト値を使用してマージのオプションをユーザーに提供します。 ユーザーはデフォルト値を変更できるように、また、デフォルトを公開することができます。 次のようにjQueryのプラグインでは、コモン・モードは、次のとおりです。

$.fn.plugin = function( options ) {
    options = $.extend( {}, $.fn.plugin.defaults, options );
    // Plugin logic goes here.
};
 
$.fn.plugin.defaults = {
    param1: "foo",
    param2: "bar",
    param3: "baz"
};

コンポーネントライブラリ(ウィジェット工場)も、この機能を提供し、改善がなされています。 ウィジェットライブラリ(ウィジェット工場)を使用した後、それを以下に示します。

$.widget( "ns.plugin", {
 
    // Default options.
    options: {
        param1: "foo",
        param2: "bar",
        param3: "baz"
    },
 
    _create: function() {
        // Options are already merged and stored in this.options
        // Plugin logic goes here.
    }
 
});