jquery.minimalect:カスタマイズされたセレクトボックスを表示するJs



過去に
CUSTOM-SELECT:セレクトボックスをカスタマイズするJS(恐らくIE6も対応)
をご紹介しましたが、
今回は別のプラグイン(jquery.minimalect.js)を使用した方法です。

1.読込むJsとCSSファイル

<link rel="stylesheet" type="text/css" href="jquery.minimalect.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.minimalect.js"></script>

2.JavaScriptの記述例

以下以外にもオプションを指定出来る様です。

<script type="text/javascript">
$(function() {
	//$("select").minimalect();
	$("#example1").minimalect();
	$("#example2").minimalect({ theme: "bubble", placeholder: "選択項目がありません。" });
});
</script>

3.HTMLの記述例

  <h2>デフォルトのテーマ</h2>
  <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>
<br />

  <h2>オプション「Bubble」テーマ</h2>
  <p>(選択時にフキダシの様に表示されます)</p>
  <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>

jquery.minimalect:カスタマイズされたセレクトボックスを表示するデモページ

ソース元:Minimalect by groenroos

上記以外にデザインパーツさえあれば、CSSとかの調整程度で
もっとカスタムできるんですかね。