jQuery UI 選択 (Selectable)
jQuery UI Selectable プラグインを使用すると、ユーザーは1つまたは複数の要素の集合から自由に選択を行うことができます。
使用方法
- jQuery と jQuery UI ライブラリを読み込みます。
- 選択可能な要素を囲むコンテナを作成します。
- `$(selector).selectable();` を使用して Selectable プラグインを初期化します。
コード例
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI 選択 - デモ</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#selectable" ).selectable();
} );
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">項目一</li>
<li class="ui-widget-content">項目二</li>
<li class="ui-widget-content">項目三</li>
<li class="ui-widget-content">項目四</li>
<li class="ui-widget-content">項目五</li>
<li class="ui-widget-content">項目六</li>
</ol>
</body>
</html>
オプション
Selectable プラグインは、以下のオプションをサポートしています:
| オプション | 説明 |
|---|---|
| appendTo | 補助要素を追加するターゲット要素を指定します。 |
| autoRefresh | DOM 変更後、リストを自動的に更新するかどうか。 |
| cancel | どの要素を選択できないかを指定します。 |
| delay | 選択開始前の遅延時間 (ミリ秒)。 |
| disabled | プラグイン機能を無効にするかどうか。 |
| distance | マウスをどれだけ移動したら選択を開始するか。 |
| filter | どの要素を選択できるかを指定します。 |
| tolerance | 選択許容範囲、オプション値: "fit", "touch"。 |
イベント
Selectable プラグインは、以下のイベントをサポートしています:
| イベント | 説明 |
|---|---|
| create | インスタンス作成時に発生します。 |
| selecting | 要素選択中に発生します。 |
| selected | 要素選択後に発生します。 |
| unselecting | 要素選択解除中に発生します。 |
| unselected | 要素選択解除後に発生します。 |
| start | 選択開始時に発生します。 |
| stop | 選択終了時に発生します。 |
例
- 基本的な使い方: Selectable プラグインを使用して基本的な選択機能を実装する方法を示します。
- 複数選択:
multipleオプションを使用して複数選択を許可する方法を示します。 - 選択解除:
cancelオプションを使用して選択できない要素を指定する方法を示します。 - スタイルのカスタマイズ: CSS を使用して Selectable プラグインのスタイルをカスタマイズする方法を示します。
まとめ
jQuery UI Selectable プラグインは、ページ要素の選択機能を実装するためのシンプルで使いやすい方法を提供し、豊富なオプションとイベントを使用して動作をカスタマイズすることができます。
関連文献
Q&A
Q1: Selectable プラグインで複数選択を有効にするにはどうすればよいですか?
A1: multiple オプションを true に設定します。
Q2: 特定の要素を選択できないようにするにはどうすればよいですか?
A2: cancel オプションで、選択できない要素のセレクタを指定します。
Q3: 選択された要素を取得するにはどうすればよいですか?
A3: :selected セレクタを使用して、選択された要素を取得できます。例えば、$( "#selectable .ui-selected" ) は、ID が "selectable" の要素内で選択されたすべての要素を返します。