サイト制作に関するメモ書き

HOME > JavaScript > jQuery > easyselectbox.jsの使い方まとめ

easyselectbox.jsの使い方まとめ

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>

easyselectbox.jsのデモページ(1番目です)
 

オプション

ダウンロードしたプラグイン内にサンプルが用意されているので、詳しくはそちらを確認してください。

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の使い方まとめ” への2件のフィードバック

  1. […] cly7796.net-easyselectbox.jsの使い方まとめ Yahoo知恵袋-セレクトボックスのjQueryプラグインで […]

コメントを残す

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

▲PAGE TOP