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

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

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

…ここからが続き

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_left.gif

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

MIYA

MIYA

noriさん

はじめまして!わざわざコメントを頂きありがとうございます。
自分から見れば今ので十分なくらいもしてますが、作った当人からすれば10ヶ月もたてば、直したい点とかこうすればよかったって思う事は確かにありますよね;;

リクエストがある際は遠慮なくコメントしたいと思います!
ありがとうございました。

2009年07月22日 12:38

nori

nori

はじめまして。
紹介ありがとうございます。

selectaleは公開してから早いもので10ヶ月が経ったので色々と直したりしたいところです。。

selectableに限らず何か要望などあればコメントなどでどんどん言ってください:)

2009年07月22日 01:37

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article