jQueryのUIの例 - 選択（選択可能）
要素の単一の要素またはグループを選択するには、マウスを使用します。
選択可能な相互作用の詳細については、APIドキュメントを参照してウィジェット（選択ウィジェット）を選択することができます 。
デフォルトの機能
選択可能な機能を有効化またはDOM要素の要素のグループに。 マウスをドラッグして項目を選択します。 複数の非連続のエントリを選択するには、Ctrlキーを押したままにします。
<！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">
<スタイル>
#feedback {フォントサイズ：1.4em;}
#selectable .ui-選択{背景：＃FECA40;}
#selectable .ui-選択{背景：＃F39814;色：白;}
#selectable {リストスタイル型：なし;マージン：0;パディング：0;幅：60％;}
#selectable李{マージン：3px;パディング：0.4em;フォントサイズ：1.4em;高さ：18px;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#selectable」）.selectable（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<オルのID = "選択">
<李クラス= "UI-ウィジェットコンテンツ">項目1 </ LI>
<李クラス= "UI-ウィジェットコンテンツ">項目2ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目3ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目4ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目5ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目6ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目7ます。</ li>
</オル>
</ BODY>
</ HTML>
これは、グリッドとして表示されます
彼らは同じ寸法と浮遊ディスプレイとCSSを使用するように選択可能なエントリは、グリッドとして表示されてみましょう。
<！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">
<スタイル>
#feedback {フォントサイズ：1.4em;}
#selectable .ui-選択{背景：＃FECA40;}
#selectable .ui-選択{背景：＃F39814;色：白;}
#selectable {リストスタイル型：なし;マージン：0;パディング：0;幅：450px;}
#selectable李{マージン：3px;パディング：1pxは、フロート：左;幅：100ピクセル;高さ：80px;フォントサイズ：4em;テキスト整列：センター;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#selectable」）.selectable（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<オルのID = "選択">
<李クラス= "UI-状態-デフォルト"> 1 </ LI>
<李クラス= "UI-状態-デフォルト"> 2 </ LI>
<李クラス= "UI-状態-デフォルト"> 3 </ LI>
<李クラス= "UI-状態-デフォルト"> 4 </ LI>
<李クラス= "UI-状態-デフォルト"> 5 </ LI>
<李クラス= "UI-状態-デフォルト"> 6 </ LI>
<李クラス= "UI-状態-デフォルト"> 7 </ LI>
<李クラス= "UI-状態-デフォルト"> 8 </ LI>
<李クラス= "UI-状態-デフォルト"> 9 </ LI>
<李クラス= "UI-状態-デフォルト"> 10 </ LI>
<李クラス= "UI-状態-デフォルト"> 11 </ LI>
<李クラス= "UI-状態-デフォルト"> 12 </ LI>
</オル>
</ BODY>
</ HTML>
シリアライゼーション
機能ライトstop選択された項目のインデックス値を収集するためのトリガイベントを。 これらの値は、フィードバックとして、またはデータ転送の文字列の形式で提示されています。
<！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">
<スタイル>
#feedback {フォントサイズ：1.4em;}
#selectable .ui-選択{背景：＃FECA40;}
#selectable .ui-選択{背景：＃F39814;色：白;}
#selectable {リストスタイル型：なし;マージン：0;パディング：0;幅：60％;}
#selectable李{マージン：3px;パディング：0.4em;フォントサイズ：1.4em;高さ：18px;}
</スタイル>
<スクリプト>
$（関数（）{
.selectable $（ "#selectable」）（{
停止：関数（）{
VAR結果= $（ "＃-結果を選択」）.empty（）;
$（ ".ui-選択」、この）.each（関数（）{
varインデックスは= $（ "#selectable李」）.INDEX（この）;
result.append（「＃」+（インデックス+ 1））;
}）;
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<Pのid = "フィードバック">
<スパン>あなたが選択されています：</ span>の<スパンのid = "選択し、その結果を">なし</ span>を。
</ P>
<オルのID = "選択">
<李クラス= "UI-ウィジェットコンテンツ">項目1 </ LI>
<李クラス= "UI-ウィジェットコンテンツ">項目2ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目3ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目4ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目5ます。</ li>
<李クラス= "UI-ウィジェットコンテンツ">項目6ます。</ li>
</オル>
</ BODY>
</ HTML>