前の記事 ≪：AjaxのレスポンスをキャッシュするJavaScriptライブラリ「JSOC」
次の記事 ≫：PHPとAjaxを使ったWEBベースのファイル管理ツール「PHP Navigator」

独自デザインのSelectボックスを作成するJavaScriptライブラリ「Custom SelectBox」

2006年11月16日-はてなブックマーク

スポンサード リンク
[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法
Custom SelectBox (WebFX)

This sample creates a selectbox that works almost identically to the

独自デザインのSelectボックスを作成するJavaScriptライブラリ「Custom SelectBox」。
<option> の中身にHTMLタグを指定することが出来るようです。



次のようなコードでこれが実現できます。

<html>
<head>
<link type="text/css" rel="STYLESHEET" href="classic.css">
<script type="text/javascript" src="fade.js"></script>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="writeSelect.js"></script>
</head>
<body>

<script type="text/javascript">
<!--
optionArray = new Array();
optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");
optionArray[1] = new Option("Item <b>2</b>", "value 2");
optionArray[2] = new Option("Item 4", "value 4");
optionArray[3] = new Option("Item 5", "value 5");
writeSelectBox(optionArray, "select1", 1, "", "margin-left: 10");
//-->
</script>

</body>
</html>

アイテムは、new Option( 表示するHTMLタグ, 値, アイテムに適用するスタイル) で定義します。
そして、writeSelectBox( 内容の配列, selectのname属性値, コールバック関数, 適用するスタイル); で選択ボックスが描画されます。

尚、残念ながらFirefoxではうまく動作しませんでした。

関連の記事検索：JavaScript, Web制作, CSS
スポンサード リンク

By.KJ : 2006年11月16日 07:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)