jQueryのUIの例 - パーツギャラリー（ウィジェットファクトリー）
ステートフルjQueryプラグインを作成するために、すべての同じ抽象化でのjQuery UIウィジェットを使用。
ウィジェット・ライブラリー（ウィジェットファクトリー）の詳細については、APIドキュメントの確認コンポーネントライブラリ（ウィジェット工場） 。
デフォルトの機能
デモでは、カスタム・ウィジェットを作成するために、コンポーネントライブラリ（jquery.ui.widget.js）を使用する単純なを示しています。
初期化する別の方法で三ブロック。 その背景色を変更する場合にクリックします。 それがどのように動作するかを理解するためのビューのソースコードとコメント。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIウィジェットライブラリ（ウィジェットファクトリー） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.custom-色付け{
フォントサイズ：20ピクセル;
位置：相対;
幅：75px;
高さ：75px;
}
.custom-色付けチェンジャー{
フォントサイズ：10pxの;
位置：絶対;
右：0;
ボトム：0;
}
</スタイル>
<スクリプト>
$（関数（）{
//メンバーの定義、ここで "カスタム"名前空間、「色付け」メンバーの$ .widget（「custom.colorize」の名前があり、{
//デフォルトのオプション：{
赤：255、
緑：0、
青：0、
//コールバックの変更：ヌル、
ランダム：ヌル
}、
//コンストラクタ_CREATE：関数（）{
this.element
//クラスのトピックを追加
.addClass（「カスタム色を付けます」）
//防止）（テキスト.disableSelectionを選択するために、ダブルクリックします。
this.changer = $（ "<ボタン>"、{
テキスト：「変更」
"クラス"： "カスタム色を付ける-チェンジャー」
}）
.appendTo（this.element）
.button（）。
//ランダムなメソッドthis._on（this.changer、{にクリックイベントチェンジャーボタンをバインド
ウィジェットが無効になっている場合//、_onランダム呼び出されません
クリック： "ランダム"
}）;
this._refresh（）。
}、
（）関数{//は、作成時_refresh呼び出し、オプションを変更
this.element.css（「背景色」、「RGB（ "+
this.options.red + "、" +
this.options.green + "、" +
this.options.blue + "）"
）;
//トリガーのコールバック/イベントthis._trigger（ "変更"）;
}、
{関数（イベント）：//ランダムな値// publicメソッドは、ランダム.colorize（「ランダム」）を介して直接呼び出すことができますに色を変更します
varの各色= {
赤：Math.floor（Math.random（）* 256）、
緑：Math.floor（Math.random（）* 256）、
青：Math.floor（Math.random（）* 256）
};
//トリガイベント、場合キャンセルするかどうかを確認してください（）this._trigger（「ランダム」イベント、色！==偽）{
this.option（色）。
}
}、
//ここ_onによって結合された自動削除イベントは、他の修正の_destroyをリセット//：関数（）{
//（）this.changer.remove生成された要素を削除してください。
this.element
.removeClass（「カスタム色を付けます」）
.enableSelection（）
.css（ "背景色"、 "透明"）;
}、
関数（）{：ハッシュすることで// _setOptionsは、すべての変更のオプションが常に_setOptionsを更新しているときに//呼び出すためのオプションを変更します
// _superそして_superApply
this._superApply（引数）;
this._refresh（）。
}、
各個人がオプションを変更するために// _setOption _setOption呼び出す：関数（キー、値）{
（/red|green|blue/.test(key）場合は無効防ぐために//色の値&&（値<0 ||値> 255））{
返します。
}
this._super（キー、値）;
}
}）;
//デフォルトのオプションの$を初期化します（「＃私の-WIDGET1」）.colorize（）;
// 2つのカスタムオプション$（ "＃私の-WIDGET2」）を初期化する.colorizeでは（{
赤：60、
青：60
}）;
//自己定義された値によって緑とのみ$（ "＃私の-widget3」）を初期化するのに十分なグリーン色ランダムコールバックを可能にします.colorize（{
緑：128、
ランダム：機能（イベント、UI）{
ui.green> 128を返します。
}
}）;
// [スイッチオン]をクリックして有効/無効
$（ "#disable"）.click（関数（）{
すべてのインスタンス//一緒に切り替えるのすべてのインスタンスを検索するために、各ウィジェットの//カスタムセレクタ、私たちは（$（かどうかを確認するために、第1の状態から始めることができます "：カスタム色を付けます」）.colorize（ "オプション"、 "無効"））{
$（ "：カスタム色を付ける」）.colorize（"有効 "）;
}エルス{
$（ "：カスタム色を付ける」）.colorize（"無効 "）;
}
}）;
//初期化後、[設定]オプションをクリックします$（ "#black"）.click（関数（）{
$（ "：カスタム色を付ける」）.colorize（"オプション "、{
赤：0、
緑：0、
青：0
}）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIV>
<DIVのID = "私の-WIDGET1">変更の色</ DIV>
<DIVのID = "私の-WIDGET2">変更の色</ DIV>
<DIVのID = "私の-widget3">変更の色</ DIV>
<ボタンID = "無効">は、</ button>の無効化オプションを切り替えます
黒を<ボタンID = "黒"> </ button>の
</ DIV>
</ BODY>
</ HTML>