skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

formを使用する時にデフォルトのものだとちょっと味気ないです。
そんな時に今回のJavaScriptjQuery Stylish Select pluginを利用すると、selectを鮮やかにすることができます。

使用方法
jQuery Stylish Select pluginからjquery.stylish-select.js、stylish-select.cssをダウンロードします。
また、画像が2枚あります。（画像1、画像2）
これらを以下のように記述します。
<link rel="stylesheet" type="text/css" href="stylish-select.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.stylish-select.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').sSelect();
});
</script>

※css内に画像を指定する場所があるので、適宜変更下さい。
あとは、formを書き込めば完成です。
<select id="id名">
<option value="1">項目1</option>
<option value="2">項目2</option>
<option value="3">項目3</option>
</select>

※XPバージョンにするには上記をdiv id="win-xp"でくくる必要があります。
フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」サンプル

記事作成：2009年05月30日

前の記事：スライドするメニューをJavaScriptで作る「Sliding JavaScript Menu Highlight 1kb」
次の記事：2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に！