第1回「プルダウンの簡単デザイン」easyselectbox.js

サンプル 動きます!!

 

目次

・「easyselectbox.js」とは

「easyselectbox.js」の使い方

必ず、使って欲しいオプション【必読】

・まとめ

・今回の記事を書くにあたって参考にしたサイト


・「easyselectbox.js」とは

 プルダウン(select option)をデザインするjQueryライブラリです。

 本来、デザインはCSSスタイルシートで行いますが、プルダウンのデザインはブラウザの種類によって異なります。その為、思ったように作るのが難しいのです。

 easyselectbox.jsは、プルダウンを全てのブラウザで同じように表示させます。(厳密にいうと、元のプルダウンを「div」に置き換えて表示します。)

 時と場合により、例えば「ヘッダーにプルダウンを付ける時は、同じデザインの方が良いし」、そういう時はとても便利なjQueryライブラリです。

 


・「easyselectbox.js」の使い方

ダウンロード先から、JSファイルCSSファイルをダウンロードします。

ダウンロードページ

easyselectbox.min.js と easyselectbox.css という二つのファイル

imagesというフォルダだけで充分です。

 

HTMLファイルでは、ダウンロードしたファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="easyselectbox.min.js"></script>
<link rel="stylesheet" href="easyselectbox.css" />

HTML

<select name="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>

jQuery

<script type="text/javascript">
$(function() {
    $('select[name="select01"]').easySelectBox();
});
</script>

※この時、要素を指定するセレクタは、id名でなくてもOKです。もちろんclass名でもOKです。

これで、基本的な使い方はできているはずです。

 

あとはダウンロードしたCSSファイルを、自分好みのデザインし、どんどん編集しましょう。

 

オプションを付ける事で、もっと便利に管理しやすくなります。

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の構造をカスタマイズする。

 


必ず、使って欲しいオプション【必読】

 ここまでは、参考にさせて頂いたWebサイトを見ればわかる事なのですが、ここは完全なオリジナルです。

jQuery(function () {
	$('select[name="select1"]').easySelectBox({
		speed:100,
		onClick: function (data) {
			//セレクトが変更された際に、イベントを発生させます。
			$('.lang_selector').trigger('change');
		}
	});
	
});

 実は、プルダウンで違う項目を選択しても、「 change 」イベントが発生しない状況になっています。なので、その時は「 change 」イベントを発火させましょう。

 実際に編集してみて、変更された時のイベントがないと、なにもできない。と困ったことがあります。ぜひそういう時はここを確かめてみてください。

 


・まとめ

 ブラウザの種類によって、デザインとか機能が違うのってよくありますよね。

Googleクローム Microsoft Edge ファイアーフォックス IE Sfari   ・・・ets・・・

 

 しかし、悩みどころですが、こういうのを一個一個解決していけば、強みになるかもしれません!

ではでは

 


・今回の記事を書くにあたって参考にしたサイト

easyselectbox.jsの使い方まとめ

jQueryプラグイン Easy Select Box でセレクトボックスをカスタマイズ

参考にさせて頂いたサイトの管理者様、今回もありがとうございました。

,,,,

Leave a comment

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