使いやすいセレクトボックスを実装できる jqselectable.js

3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。

• jqselectable のサンプル
• 5509/jQselectable – GitHub

使い方

実行する前に

ファイルをgithubからダウンロードして、CSS/JSファイルを読み込んでおきます。

jQueryプラグインなので、jQueryも読みこんでおきます。推奨は一応最新バージョンです。

<link rel="stylesheet" href="jqselectable/style/selectable/style.css" />
<script src="scripts/jquery.js"></script>
<script src="jqselectable/jqselectable.js"></script>

CSSは jqselectable/style の中に

• selectable
• natural
• xp

と3つ入っているので好きなものを選んでください。自分で書いても大丈夫です。そのときはgithubからpullリクエストください。

実行する

ready関数は必要に応じて使ってください。

jQuery(function($){
    $(selector).jQselectable();
});

実行時に渡しているオプションについては次項で解説しています。

オプション

オプションを使う場合は、実行時の引数にハッシュで渡します。

$(selector).jQselectable({
    show: "fadeIn",
    showDuration: "fast",
    opacity: .9
});

オプション	解説
style	simple を指定すると普通のプルダウンになります
show	表示メソッド: show, fadeIn, slideDown
hide	非表示メソッド: hide, fadeOut, slideUp
showDuration	表示メソッドがshow以外のときにかける時間
hideDuration	非表示メソッドがhide以外のときにかける時間
height	styleがsimpleのときに高さを指定する（px不要）
opacity	プルダウンの透過度

API

APIを使う場合は、jQselectable実行時の引数を任意の変数から参照できるようにしておきます。また、この場合、適用する要素はひとつにしてください。2つ以上ある場合はちょっと面倒くさいです。以下ひとつのものベースに解説しています。

var jqs = $(selector).jQselectable();

変数から参照できる状態であれば、いつでもAPIを利用できます。とりあえずAPI一覧は以下の通りです。

API	解説
enable	実行した要素を利用可能にする
disable	実行した要素を利用不可にする
refresh	実行した要素のオプションが増減した場合など、refreshメソッドを実行すると中身をリロードできます。動的に何かする際に使ってください
destroy	jQselectableを破棄します

enable, disable, destroy

サンプルコードままですが、ボタンをクリックすると使えるようにしたり使えなくします。

var $jqs = $("#triggerbind").jQselectable({
    style: "simple",
    height: 150,
    opacity: .9
});

$('#disabled').click(function() { $jqs.jQselectable('disable'); });
$('#enabled').click(function() { $jqs.jQselectable('enable'); });
$('#destroy').click(function() { $jqs.jQselectable('destroy'); });

refresh

これもサンプルコードままですが、addボタンをクリックすると元のselect要素にoptionを追加して、その変更をjQselectableへ反映します。

// 実行部分は省略

$('#add').click(function() {
    $('#refresh').append('<option value="value_' + num + '">value_' + (num++) + '</option>');
    $jqs.jQselectable('refresh');
});

jQselectable.change イベント

以前はコールバック関数を呼べるようにしていたのですが、廃止して、イベントから呼べるように変更しました。

var $jqs = $("#triggerbind").jQselectable({
    style: "simple",
    height: 150,
    opacity: .9
});

// trigger bind
$jqs.bind('jQselectable.change', function(ev, data) {
    location.href = data.value;
});

オプションのvalueを元にページ遷移などしたい場合は、この方法で行います。jQselectableオブジェクトに jQselectable.change イベントを bind すると任意の処理を行えます。サンプルに書いていますが、2つ目の引数(data)に value というプロパティがあり、ここに選択した項目の value が入っています。

何かあれば

github からフォークしてください。

それにしても3年ってそんなに経ってしまったんですね・・・

github repository

• 5509/jQselectable