jQuery【 jQuery UI 】selectable を使用して複数選択が可能な項目を作成
jQuery UI の selectable を利用すると、複数選択が可能な項目を作成することができます。
今回は、selectable の使用方法について解説いたします。
目次
1. selectable を使用して複数選択が可能な項目を作成
2. grid のように表示された項目の複数選択
3. selectable のオプション
4. まとめ
１．selectable を使用して複数選択が可能な項目を作成
jQuery UI の selectable を使用して 複数選択が可能な項目を作成します。
マウス操作やタッチ操作 又は「 Ctrl 」キーを押しながら、複数の項目を選択してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#wkSelectable").selectable();
});
//-->
</script>
<style>
<!--
#wkSelectable {
background: #CCC;
padding : 20px;
}
#wkSelectable .ui-selecting {
background: pink;
}
#wkSelectable .ui-selected {
background: skyblue;
color: white;
}
-->
</style>
<ul id="wkSelectable">
<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>
</ul>
対象となる項目の 親要素の HTML 要素を指定して selectable を呼び出すと、複数の項目を選択できるようになります。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
また、タッチデバイスの対応についてはjQuery【 jQuery UI 】Touch Punch を使用してスマホ対応をご参照下さい。
▲目次へ戻る
２．grid のように表示された項目の複数選択
今度は、グリッドのように表示された項目について、selectable を使用します。
マウス操作やタッチ操作 又は「 Ctrl 」キーを押しながら、複数の項目を選択してみて下さい。
- Ｎｏ．１
- Ｎｏ．２
- Ｎｏ．３
- Ｎｏ．４
- Ｎｏ．５
- Ｎｏ．６
- Ｎｏ．７
- Ｎｏ．８
- Ｎｏ．９
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#wkGrid").selectable();
});
//-->
</script>
<style>
<!--
#wkGrid {
background: #CCC;
padding : 20px;
width: 325px;
height: 325px;
}
#wkGrid .ui-selecting {
background: pink;
}
#wkGrid .ui-selected {
background: skyblue;
color: white;
}
#wkGrid li {
float: left;
width: 95px;
height: 95px;
padding : 0px;
margin : 0px;
text-align: center;
}
-->
</style>
<ul id="wkGrid">
<li class="ui-state-default">Ｎｏ．１</li>
<li class="ui-state-default">Ｎｏ．２</li>
<li class="ui-state-default">Ｎｏ．３</li>
<li class="ui-state-default">Ｎｏ．４</li>
<li class="ui-state-default">Ｎｏ．５</li>
<li class="ui-state-default">Ｎｏ．６</li>
<li class="ui-state-default">Ｎｏ．７</li>
<li class="ui-state-default">Ｎｏ．８</li>
<li class="ui-state-default">Ｎｏ．９</li>
</ul>
CSS で「 float: left; 」を設定していますので、グリッド表示の次に読み込まれる HTML 要素で CSS を「 clear:both; 」と設定して float 設定の解除を行う必要があります。
float 設定の解除についてはfloatの解除をご参照下さい。
▲目次へ戻る
３．selectable のオプション
selectable には、次のようなオプションがあります。
| appendTo |
選択ヘルパーを挿入する要素を指定
初期値：”body”
|
| autoRefresh |
各選択操作を開始した際に 選択要素の位置・サイズをリフレッシュするかどうかを指定
初期値：true
|
| cancel |
選択操作で対象となった場合に 選択状態にしない要素を セレクタで指定
初期値：”input,textarea,button,select,option”
|
| delay |
選択操作を開始する時間をミリ秒単位で指定
初期値：0
|
| disabled |
選択機能を無効化するかどうかを指定
初期値：false
|
| distance |
選択可能となるまでに ポインタを動かす必要のある距離をピクセル単位で指定
初期値:1
|
| filter |
選択される子要素をセレクタによってフィルタリングする指定
初期値:”*”
|
| tolerance |
選択ボックスと選択対象要素とが どのような状況で選択状態になるか モードを指定
“touch”（初期値）：少しでも重なったら選択状態
“fit”：完全に重なったら選択状態
|
selectable にオプション（下のサンプルでは「 appendTo 」）を設定する場合は、次のように記述します。
$("#wkSelectable").selectable("option", "appendTo", "#wkElm");
▲目次へ戻る
4. まとめ
jQuery UI の selectable を利用して複数選択が可能な項目を作成する方法について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」
▲目次へ戻る
