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

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

使用方法
select.jsproSelectBox.cssprototypeから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」サンプル

sponsors

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

記事作成:
記事URL:

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