小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


select ボックスを抜群に使いやすくするjQselectableを試してみた。

phpspot開発日誌さんのところで、select ボックスを超便利にしてくれるjQselectableが紹介されていました。すごく良さそうだったので、試してみました。
jQselectableは、jQueryのプラグインで、selectボックスを一覧で表示する際に見やすく、そして選択しやすくしてくれるライブラリです。

select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。
jQというだけあって当然ながらjQueryプラグインの形式です。
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌 はてなブックマーク - 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>