jQuery【 jQuery UI 】selectable を使用して複数選択が可能な項目を作成

colmun_main11006

jQuery UI の selectable を利用すると、複数選択が可能な項目を作成することができます。
今回は、selectable の使用方法について紹介します。

目次

 
1.selectable を使用して複数選択が可能な項目を作成
2.grid のように表示された項目の複数選択
3.selectable のオプション

1.selectable を使用して複数選択が可能な項目を作成

 
jQuery UI の selectable を使用して 複数選択が可能な項目を作成します。
マウス操作やタッチ操作 又は「 Ctrl 」キーを押しながら、複数の項目を選択してみて下さい。

  • No.1
  • No.2
  • No.3
  • No.4
  • No.5

 
上のサンプルのソースコードは次の通りです。

<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">No.1</li>
  <li class="ui-widget-content">No.2</li>
  <li class="ui-widget-content">No.3</li>
  <li class="ui-widget-content">No.4</li>
  <li class="ui-widget-content">No.5</li>
</ul>

対象となる項目の 親要素の HTML 要素を指定して selectable を呼び出すと、複数の項目を選択できるようになります。

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

また、タッチデバイスの対応についてはjQuery【 jQuery UI 】Touch Punch を使用してスマホ対応をご参照下さい。

▲目次へ戻る

 

2.grid のように表示された項目の複数選択

 
今度は、グリッドのように表示された項目について、selectable を使用します。
マウス操作やタッチ操作 又は「 Ctrl 」キーを押しながら、複数の項目を選択してみて下さい。

  • No.1
  • No.2
  • No.3
  • No.4
  • No.5
  • No.6
  • No.7
  • No.8
  • No.9

 
上のサンプルのソースコードは次の通りです。

<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">No.1</li>
  <li class="ui-state-default">No.2</li>
  <li class="ui-state-default">No.3</li>
  <li class="ui-state-default">No.4</li>
  <li class="ui-state-default">No.5</li>
  <li class="ui-state-default">No.6</li>
  <li class="ui-state-default">No.7</li>
  <li class="ui-state-default">No.8</li>
  <li class="ui-state-default">No.9</li>
</ul>

CSS で「 float: left; 」を設定していますので、グリッド表示の次に読み込まれる HTML 要素で CSS を「 clear:both; 」と設定して float 設定の解除を行う必要があります。

float 設定の解除についてはfloatの解除をご参照下さい。

▲目次へ戻る

 

3.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");

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です