jQuery UI逆引きリファレンス
Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Selectableウィジェットを利用することで、指定された要素配下の子要素群を選択可能にできます。子要素は、マウスのクリックで単一選択できるのはもちろん、［Ctrl］キーを押しながらクリックするか、範囲選択するようにマウスをドラッグすることで複数の要素をまとめて選択することもできます。
誤解のしようもないシンプルなウィジェットですので、さっそく具体的な例を見ていきましょう。以下は、Selectableウィジェットを利用して、<ul>リストを選択可能にする例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AutoCompleteウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<!--3選択リストのスタイル-->
<style type="text/css">
#list { list-style-type:none; margin: 5px; width: 250px; }
#list li { border: solid 1px #000; color: #fff; margin: 5px; padding: 5px; }
.ui-selectee { background-color: #36c; }
.ui-selected { background-color: #f00; }
.ui-selecting { background-color: #ff0; }
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2Selectableウィジェットを適用
$('#list').selectable();
});
</script>
</head>
<body>
<!--1リストを準備-->
<ul id="list">
<li>Angular.js </li>
<li>Backbone.js </li>
<li>Knockout </li>
<li>Express.js </li>
<li>Ext JS </li>
</ul>
<!--選択された項目を表示（あとから利用）-->
<div id="result"></div>
</body>
</html>
|
Selectableウィジェットを利用するには、1のように選択可能なリストを用意したうえで、2のようにselectableメソッドを呼び出します。ただし、Selectableウィジェットの役割は、リスト項目に対して、その時どきの状態に応じてスタイル・クラスを割り当てるまでです。例えば、以下のようにです。
|
<ul id="list" class="ui-selectable">
<li class="ui-selectee ui-selecting">Angular.js </li>
<li class="ui-selectee ui-selected">Backbone.js </li>
<li class="ui-selectee ui-selected">Knockout </li>
<li class="ui-selectee ui-selected">Express.js </li>
<li class="ui-selectee">Ext JS </li>
</ul>
|
それぞれのスタイル・クラスの意味は、以下のとおりです。
| スタイル・クラス | 概要 |
|---|---|
| ui-selectable | 選択可能な領域全体 |
| ui-selectee | 選択可能な要素 |
| ui-selecting | 選択操作中の項目 |
| ui-unselecting | 選択が解除された項目 |
| ui-selected | 選択された項目 |
サンプルでも、3のようにそれぞれのクラスに応じたスタイルを割り当てることで、選択／非選択状態を視覚的に表しているわけです。
Selectableウィジェットで利用可能なパラメーター
selectableメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。
（1）toleranceパラメーター
Selectableウィジェットによって「項目が選択された」と認識する基準を決定します。デフォルトの「touch」である場合には、マウスの選択範囲が要素の一部に触れたところで「選択された」と見なします。もう1つの設定値「fit」では、マウスの選択範囲が要素を完全に覆ったところで初めて、「選択された」と見なします。
（2）filterパラメーター
Selectableウィジェットによって選択可能になる子要素を決定します。デフォルトは「*」で全ての子要素が選択可能になります。例えば、以下のようにすることで「class="select"」属性を持つ子要素だけが選択可能になります。
|
$('#list').selectable({ filter: '.select' });
|
（3）Selectableウィジェットのイベント
Selectableウィジェットには以下のようなイベントが用意されており、選択／選択解除などのタイミングで独自の処理を差し挟めるようになっています。下記の表に示すプロパティは、イベント・リスナーの第2引数を経由してアクセスできるイベント固有の情報を表します（戻り値は全てElementオブジェクトです）。
| イベント名 | 発生タイミング プロパティ名 | 概要 |
|---|---|---|
| start | 選択を開始したとき | |
| － | － | |
| stop | 選択を終えたとき | |
| － | － | |
| selecting | 選択動作中 | |
| selecting | 選択された要素 | |
| selected | 要素が選択されたとき | |
| selected | 選択された要素 | |
| unselecting | 選択解除中 | |
| unselecting | 非選択状態になった要素 | |
| unselected | 要素が選択解除されたとき | |
| unselected | 非選択状態になった要素 | |
例えば、選択された要素を列挙するには、以下のようにします。
|
$(function() {
var result;
$('#list').selectable({
// 1変数resultを初期化
start: function() {
result = '';
$('#result').text('選択中です。');
},
// 2選択された要素を変数resultにセット
selected: function(e, ui) {
result += $(ui.selected).text();
},
// 3変数resultの内容を表示
stop: function() {
$('#result').text(result + 'が選択されました。');
}
});
});
|
選択された要素は、変数resultにセットするものとします。startイベントで変数resultを初期化しておき（1）、selectedイベントで選択された要素（ui.selected）を変数resultに格納します（2）。selectedプロパティの戻り値はElementオブジェクトなので、textメソッドにアクセスするには、$()関数でjQueryオブジェクトに変換しなければならない点に注意してください。変数resultの内容は、最終的にstopイベントで出力します（3）。
別解として、selected／stopイベントをまとめて、以下のように書いても同じ意味です。
|
stop: function() {
$('#result').text($('.ui-selected').text() + 'が選択されました。');
}
|
「class="ui-selected"」属性が付与された要素を選択済みと見なして、そのテキストをまとめて取得しているわけです。
※以下では、本稿の前後を合わせて5回分（第18回～第22回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
18. AutoCompleteウィジェットの検索／表示方法をカスタマイズするには？
AutoCompleteウィジェットのイベントやメソッドを利用しながら、候補リストの検索／選択時の処理をカスタマイズする方法について説明。
19. AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには？
AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。
20. 【現在、表示中】≫ Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
