jQueryでselectボックスの見ためを変えるプラグイン

Category ：
Javascript

select関係のプラグインは海外のサイト含め色々調べてみたのですが、5509 のnoriさんが作った「selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js 」が一番クオリティも高く、自分も使わせて頂いた経験もあるので紹介しておきます。

デモページ　by 5509

…ここからが続き

jQuery.selectable.js 使い方など

ダウンロードや詳しい使い方などは5509さんを見たら分かるとは思うのですが、このまま記事を紹介するだけってのもあれですし、自分が使った際の見た目のちょっとした変更などの説明をしておきたいと思います。

まずは selectable の方がどの用な構造になっているのか。見た目は下記画像のままです。

jQueryでselectボックスの見ためを変えるプラグイン

<select id="pref" name="pref">
	<optgroup label="北海道">
		<option value="01">北海道</option>
	</optgroup>

					～ 省略 ～

	<optgroup label="沖縄">
		<option value="47">沖縄県</option>
	</optgroup>
</select>

上記ソースが jQuery.selectable.js が実行された時は下記の用になります。

jQueryでselectボックスの見ためを変えるプラグイン

<div id="pref_mat" class="sctble_mat sctble selectable optg" style="position: absolute; z-index: 1000; display: none;">
<dl class="first-child last-child">
<dt class="first-child">北海道</dt>
<dd><a href="#%E5%8C%97%E6%B5%B7%E9%81%93" name="01" class="selected first-child last-child">北海道</a></dd>

		 ～ 省略 ～

<dt>沖縄</dt>
<dd class="last-child"><a href="#%E6%B2%96%E7%B8%84%E7%9C%8C" name="47" class="first-child last-child">沖縄県</a></dd>
</dl>
</div>

基本的に dl 要素で生成されており、初めの要素にはclass="first-child"、最後の要素にはclass="last-child"がつく仕様になっています。

上記 CSS の要素は natural sekectable 共に style.css に記述されている下記ソースの部分です。

/* Pulldown Mat (Basis)
=================================*/

div.sctble_mat {
	background: #e1ead6;
}

	div.sctble_mat dl { 
		border-color: #93af72;
	}
	
	div.sctble_mat a {
		color: #262626;
	}
	
	div.sctble_mat a.selected {
		color: #666;
	}

ここで背景の色やボーダーの色テキストの色などを変更して下さい。

jQueryでselectボックスの見ためを変えるプラグイン

こちらの部分なんですが CSS で背景画像として設定してあります。

使用している画像はこんな感じです。

select_left.gif

select_right.gif

この部分を natural sekectable 共に style.css の下記ソースで指定。

/* Selectbox Styles
=================================*/

a.sctble_display {
	border: none;
	padding-right: 26px;
	background: url(select_right.gif) no-repeat right top;
}
a.sctble_display:hover { background-position: right -25px }
a.sctble_focus { background-position: right -50px !important }

	a.sctble_display span {
		padding-left: 7px;
		height: 25px;
		background: url(select_left.gif) no-repeat left top;
		line-height: 25px;
	}
	a.sctble_display:hover span { background-position: left -25px }
	a.sctble_focus span { background-position: left -50px !important }

ちなみに自分は高さ 25px×3 で色の違うバージョンの画像を同じ名前で作ったのでここの部分のCSSは触りませんでした。

まぁ～こんな感じで自分はほぼそのまま使わせて頂きました。

ちなみにダウンロードはselectボックスをシンプルなプルダウンに拡張するjQuery.selectable.jsからお願いしますね。

Comments