selectのデザインをカスタマイズする機会があったので、easyselectbox.jsというプラグインを試してみました。
使い方
下記からダウンロードできます。
kosinix/easyselectbox · GitHub
ダウンロード後、必要なファイルを読み込みます。
<link rel="stylesheet" href="easyselectbox.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="easyselectbox.min.js"></script>
HTML
<select name="select01" id="select01"> <option value="">選択してください</option> <option value="javascript">JavaScript</option> <option value="jquery">jQuery</option> <option value="angular">AngularJS</option> <option value="backbone">Backbone.js</option> <option value="zepto">Zepto</option> <option value="d3">D3.js</option> <option value="three">three.js</option> <option value="coffeescript">CoffeeScript</option> </select>
JavaScript
<script type="text/javascript">
$(function() {
$('#select01').easySelectBox();
});
</script>
オプション
ダウンロードしたプラグイン内にサンプルが用意されているので、詳しくはそちらを確認してください。
| element.easySelectBox({ speed: num }); |
numのスピードで表示のアニメーションをする。 |
|---|---|
| element.easySelectBox(‘option’, ‘index’, num); | nun番目のselectを選択された状態にする。 |
| element.easySelectBox(‘select’, text); | selectのテキストがtextのものを選択された状態にする。 |
| element.easySelectBox(‘select’, val, true); | selectのvalueがvalのものを選択された状態にする。 |
| element.easySelectBox(‘option’, ‘disabled’, true); | selectを選択不可にする。 |
| element.easySelectBox(‘option’, ‘disabled’, false); | selectを選択可にする。 |
| element.easySelectBox(‘open’, true); | selectを開いた状態にする。 フォーカスが外れても開いたまま。 |
| element.easySelectBox(‘close’); | selectを閉じた状態にする。 |
| element.easySelectBox({ onClick:function(data) { } }); |
select選択後に処理を行う。 data.textで選択したselectのテキスト、data.valueでvalueが取得できる。 |
| element.easySelectBox({ onBuildList:function(data) { } }); |
selectの構造をカスタマイズする。 |
【参考サイト】
[…] Easyselectbox.jsの使い方まとめ | Cly7796.net https://cly7796.net/blog/javascript/plugin-easyselectbox/ […]
[…] cly7796.net-easyselectbox.jsの使い方まとめ Yahoo知恵袋-セレクトボックスのjQueryプラグインで […]