セレクトボックスを装飾するjavascript「Select Box」

フォームは閲覧者との重要な接点です。
そのためにはデザインを凝ることも必要です。
Script.aculo.us Select Boxではセレクトボックスを奇麗にすることができます。

使用方法
select.jsとproSelectBox.css、prototypeからporotype.js、script.aculo.usをダウンロードします。
またCSSで使用している画像bg_select.jpgもダウンロードします。
<link rel="stylesheet" href="http://yourdomain/proSelectBox.css" type="text/css">
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>

<script src="http://yourdomain/scriptaculous.js" type="text/javascript"></script>
<script src="http://yourdomain/select.js" type="text/javascript"></script>
上記をhead内に書き込んだら、HTMLを以下のように記述します。
<form>
<select id="options" name="options" class="combo">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
</form>
<script type="text/javascript">
new Autocompleter.SelectBox('options');
</script>
セレクトボックスを装飾するjavascript「Select Box」サンプル

2007年11月04日

前の記事：実はお勧めだった15のJavaScriptたち（2007/6～10）
次の記事：はてなブックマーク人気エントリーを「Google Ajax Feed API」を使用して表示

関連記事

• パスワード強度を視覚的に明示するjavascript「Password Strength」
• [prototype]DateChooser
• 星形投票システムを実現するjavascript「StarBox 」
• プロキシーライクなゲームを作成するjavascript「Blocks.js」
• 画像ギャラリーの定番javascript「LightBox」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」