jquery.minimalect.jsを使ってカスタマイズされたセレクトボックスを表示する方法｜DAD UNION

jquery.minimalect.jsを使ってカスタマイズされたセレクトボックスを表示する方法をご紹介します。

Contents

カスタマイズされたセレクトボックスを表示するCSSの記述
カスタマイズされたセレクトボックスを表示するJavaScriptの記述
カスタマイズされたセレクトボックスを表示するHTMLの記述
jquery.minimalect：カスタマイズされたセレクトボックスを表示するデモページ
ソース元：Minimalect by groenroos

カスタマイズされたセレクトボックスを表示するCSSの記述

※jquery.minimalect.cssを読み込みます。その他は必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:400px;
	margin:0 auto;
	text-align:left;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="jquery.minimalect.css" media="screen" />

カスタマイズされたセレクトボックスを表示するJavaScriptの記述

※jquery.min.js（1.8系）、jquery.minimalect.jsファイルを読み込みます。$().minimalect()を使ってカスタマイズされたセレクトボックスを表示したいタグ要素を指定します。以下以外にもオプションを指定出来る様です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.minimalect.js"></script>
<script type="text/javascript">
$(function() {
	//$("select").minimalect();
	$("#example1").minimalect();
	$("#example2").minimalect({ theme: "bubble", placeholder: "選択項目がありません。" });
});
</script>

カスタマイズされたセレクトボックスを表示するHTMLの記述

※カスタマイズされたセレクトボックスを表示するためselect id=”example1″とselect id=”example2″を用意しました。

<select id="example1">
    <optgroup label="JavaScript">

<option value="ajax">Ajax</option>

<option value="jquery">jQuery</option></optgroup>
    <optgroup label="PHP">

<option value="smarty">Smarty</option></optgroup>
    <optgroup label="スマートフォン">

<option value="android">Android</option></optgroup>

</select>

<h2>オプション「Bubble」テーマ</h2>

（選択時にフキダシの様に表示されます）

<select id="example2">

<option value="css">CSS</option>

<option value="facebook" selected="selected">Facebook</option>

<option value="html5">HTML5</option>

<option value="seo">SEO</option>

<option value="etc">その他</option>

</select>