2015/06/04
フォーム・選択要素で使えそうなjQuery「Selectivity」
今回はjQueryプラグイン「Selectivity」の紹介です。
これは最初select要素のカスタマイズをできるプラグインかと思っていたのですが、
ちょっと違いました。
HTML要素はselectではなくdivとかでよいようです。
機能の良くして、デザインも良くしてくれます。
単一の選択肢、複数選択、入れ子表示、
あとは、ajaxと連携して、外部のデータと紐付けたりもできるようです。
デモはこちらになります。
Selectivityの使い方
それでは、Selectivityの使い方ですが、
導入は非常に簡単です。
まずは下記必要なファイルをダウンロードします。
そして、head内で以下の記述をします。
|
1 2 3 4 | <link type="text/css" href="css/selectivity-full.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/font-awesome.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/selectivity-full.js"></script> |
font-awesomeは記号の表示のために必要です。なくても大丈夫だと思います。
スクリプトは、
|
1 2 3 4 5 | $('.demo').selectivity({ allowClear: true, items: ['1','2','3','4','5','6','7','8','9','10'], placeholder: '選択してください' }); |
となります。
htmlは、
|
1 | <div class="demo"></div> |
だけです。
基本これだけですが、
オプションやできることが多いので、
場合によってはかなり複雑になってきます。
ちなみに、DEMOのスクリプトは、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //通常 $('.cstSelect').selectivity({ allowClear: true, items: ['1','2','3','4','5','6','7','8','9','10'], placeholder: '選択してください' }); //複数選択 $('.cstSelect1').selectivity({ items: ['1','2','3','4','5','6','7','8','9','10'], multiple :true, allowClear: true, placeholder: '選択してください' }); //選択肢を入れ子に $('.cstSelect2').selectivity({ items: [{ text: "1", children:[{id: 1, text:'1-1'},{id: 2, text:'1-2'},{id: 3, text:'1-3'},{id: 4, text:'1-4'},{id: 5, text:'1-5'}] }, { text: "2", children:[{id: 6, text:'2-1'},{id: 7, text:'2-2'},{id: 8, text:'2-3'},{id: 9, text:'2-4'}] } ], placeholder: '選択してください' }); |
になります。
正直な所、もっと応用できるプラグインだと思うのですが、
使い方があんまり把握できなかったため、説明はここまでになります。
僕の希望としては、
select要素をデフォルトでもっと見た目を自由にできるようになってほしいですね・・・
Author Profile
スターフィールド編集部
SHARE
