フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」
formを使用する時にデフォルトのものだとちょっと味気ないです。
そんな時に今回のJavaScriptjQuery Stylish Select pluginを利用すると、selectを鮮やかにすることができます。
sponsors
使用方法
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」サンプル
sponsors
「フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」」をシェアする
記事作成:2009年5月30日 19:58
記事URL:http://www.skuare.net/2009/05/selectjavascriptjquery_stylish.html
TOP > javascript > フォーム関連 > フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」
前の記事:スライドするメニューをJavaScriptで作る「Sliding JavaScript Menu Highlight 1kb」
次の記事:2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!
あなたにはこちもお勧め!
jQuery プラグインまとめ!