jQueryでselectボックスの見ためを変えるプラグイン
- Category :
- Javascript
select関係のプラグインは海外のサイト含め色々調べてみたのですが、5509 のnoriさんが作った「selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js 」が一番クオリティも高く、自分も使わせて頂いた経験もあるので紹介しておきます。
- デモページ by 5509
…ここからが続き
jQuery.selectable.js 使い方など
ダウンロードや詳しい使い方などは5509さん を見たら分かるとは思うのですが、このまま記事を紹介するだけってのもあれですし、自分が使った際の見た目のちょっとした変更などの説明をしておきたいと思います。
まずは selectable の方がどの用な構造になっているのか。見た目は下記画像のままです。
<select id="pref" name="pref"> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> ~ 省略 ~ <optgroup label="沖縄"> <option value="47">沖縄県</option> </optgroup> </select>
上記ソースが jQuery.selectable.js が実行された時は下記の用になります。
<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; }
ここで背景の色やボーダーの色テキストの色などを変更して下さい。
こちらの部分なんですが 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
noriさん
はじめまして!わざわざコメントを頂きありがとうございます。
自分から見れば今ので十分なくらいもしてますが、作った当人からすれば10ヶ月もたてば、直したい点とかこうすればよかったって思う事は確かにありますよね;;
リクエストがある際は遠慮なくコメントしたいと思います!
ありがとうございました。
はじめまして。
紹介ありがとうございます。
selectaleは公開してから早いもので10ヶ月が経ったので色々と直したりしたいところです。。
selectableに限らず何か要望などあればコメントなどでどんどん言ってください:)