phpspot開発日誌さんのところで、select ボックスを超便利にしてくれるjQselectableが紹介されていました。すごく良さそうだったので、試してみました。
jQselectableは、jQueryのプラグインで、selectボックスを一覧で表示する際に見やすく、そして選択しやすくしてくれるライブラリです。
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。
jQというだけあって当然ながらjQueryプラグインの形式です。
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
使い方
1. 以下のサイトからjqselectableのライブラリをダウンロードします。
2.適用させたいページでJQueryをロードします。
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script>
3.ダウンロードしたモジュールに格納されているjsおよびcssをロード読み込ませます。
<link type="text/css" href="jqselectable1.3/css/style.css" type="text/css"> <link type="text/css" rel="stylesheet" href="jqselectable1.3/skin/selectable/style.css" /> <script type="text/javascript" src="jqselectable1.3/js/jqselectable.js"></script>
4.任意のselectボックスに対してjqselectableの設定を行います。以下の例は、idがsoftwareというselect要素に対してjQselectableのスタイルを適用します。コールバック関数は、callback:function() {}で記述します。
jQuery(function($){ $("#software").jQselectable({ style: "selectable", set: "show", setDuration: "normal", opacity: 1, callback: function() { alert($("#software").val()); } });
サンプルコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <link type="text/css" href="jqselectable1.3/css/style.css" type="text/css"> <link type="text/css" rel="stylesheet" href="jqselectable1.3/skin/selectable/style.css" /> <script type="text/javascript" src="jqselectable1.3/js/jqselectable.js"></script> <title>jQselectable demo page</title> <script type="text/javascript"> jQuery(function($){ $("#software").jQselectable({ style: "selectable", set: "show", setDuration: "normal", opacity: 1, callback: function() { alert($("#software").val()); } }); }); </script> </head> <body> <h2>jQselectable demo page</h2> <form> <select id="software" name="software"> <optgroup label="Office"> <option value="01">Office 2000</option> <option value="02">Office XP</option> <option value="03" class="br">Office 2003</option> <option value="04">Office 2007</option> <option value="05">Office 2010</option> </optgroup> <optgroup label="Visual Studio"> <option value="06">Visual Studio 6.0</option> <option value="07" class="br">Visual Studio 2003</option> <option value="08">Visual Studio 2005</option> <option value="09" class="br">Visual Studio 2008</option> <option value="10">Visual Studio 2010</option> </optgroup> </select> </form> </body> </html>