jquery.minimalect.jsを使ってカスタマイズされたセレクトボックスを表示する方法をご紹介します。
Contents
ディスプレイ広告
カスタマイズされたセレクトボックスを表示する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>
jquery.minimalect:カスタマイズされたセレクトボックスを表示するデモページ
jquery.minimalect:カスタマイズされたセレクトボックスを表示するデモページ
ソース元:Minimalect by groenroos
ソース元:Minimalect by groenroos
上記以外にデザインパーツさえあれば、CSSとかの調整程度でもっとカスタムできるんですかね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。