jQuery UI の Selectable プラグインによる複数項目選択GUI

jQuery UI の Selectable プラグインを使った、複数項目選択GUI。項目をクリックすると、項目を選択できる。選択した項目は、文字色と背景色を反転させ目立たせる。「Ctrl」キーを押しながら、項目をクリックすると、複数の項目を選択できる。

実装例（サンプル）

• 項目 1
• 項目 2
• 項目 3
• 項目 4
• 項目 5
• 項目 6
• 項目 7

実装例の動作について

• 「項目 1」をクリックすると、「項目 1」の色が反転し、選択状態となる。
• 「項目 3」の上でクリックしたまま、「項目 5」の上までカーソルを動かしクリックを解除すると、「項目 3」「項目 4」「項目 5」の色が反転し、選択状態となる。
• 「項目 2」をクリックし、「項目 2」の色を反転させ選択状態とし、「Ctrl」キーを押しながら、「項目 5」と「項目 7」をクリックすると、「項目 2」「項目 5」「項目 7」の色が反転し、選択状態となる。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML

応用

選択結果を確認

選択した結果を表示し、確認できるようにする方法。