
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.07.11
jQuery UI の selectable を利用すると、複数選択が可能な項目を作成することができます。
今回は、selectable の使用方法について紹介します。
1.selectable を使用して複数選択が可能な項目を作成
2.grid のように表示された項目の複数選択
3.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">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 を使用してスマホ対応をご参照下さい。
今度は、グリッドのように表示された項目について、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">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の解除をご参照下さい。
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");
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.