JavaScript

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

  /

セレクトボックスをカスタマイズしたいと思ったことはありませんか？
今回は、jQueryのプラグイン「jquery.minimalect.js」を使って、簡単にセレクトボックスをカスタマイズする方法をご紹介します。このプラグインを使うことで、デフォルトのセレクトボックスをより魅力的で使いやすいものに変更することができます。

Contents

必要なファイルの準備

まず、jquery.minimalect.jsとそれに対応するCSSファイルを用意します。

  • jquery.minimalect.js
  • jquery.minimalect.css

CSSの記述

jquery.minimalect.cssを読み込みます。その他、カスタマイズされたセレクトボックスを表示するために必要な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" />

　
このCSSは、ページ全体のスタイルを整え、カスタマイズされたセレクトボックスが中央に配置されるようにします。

JavaScriptの記述

次に、jquery.min.js（1.8系）、jquery.minimalect.jsファイルを読み込み、カスタマイズされたセレクトボックスを表示するためのJavaScriptを記述します。
$().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>

　
このスクリプトは、jQueryが読み込まれた後にminimalectプラグインを適用し、指定されたセレクトボックスをカスタマイズします。

HTMLの記述

カスタマイズされたセレクトボックスを表示するためselect id=”example1″とselect id=”example2″を用意しました。
以下のコードをHTMLファイル内に追加してください。

<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>

　
ここでは、2つのセレクトボックスを用意しています。1つ目はデフォルトのスタイルで、2つ目は「Bubble」テーマを適用しています。

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

実際にどのように表示されるか確認するために、デモページを用意しました。以下のリンクからアクセスしてみてください。

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

ソース元：Minimalect by groenroos

さらに詳しい情報やオプションについては、公式ドキュメントを参照してください。

ソース元：Minimalect by groenroos

まとめ

今回は、jquery.minimalect.jsを使ってカスタマイズされたセレクトボックスを表示する方法をご紹介しました。このプラグインを使うことで、簡単にセレクトボックスをカスタマイズし、よりユーザーフレンドリーなインターフェースを提供することができます。ぜひ、自分のプロジェクトでも試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.minimalect カスタムセレクトボックス
関連記事