「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

HTML標準のリストボックスで複数選択可能とする場合にはmultiple属性を指定して実装しますが、HTML標準のままでは複数選択する場合にctrlキーを押下したまま選択する必要があるので慣れていない方には操作しにくい面があります。こういう場合はjQueryプラグインの「jQuery UI MultiSelect Widget」を使用すると操作性が劇的に向上します。

「jQuery UI MultiSelect Widget」の特徴

  • 複数選択式のリストボックス(ドロップダウン)をチェックボックス+リストボックス(ドロップダウン)形式に変換して操作性を劇的に向上してくれます。
  • jQuery UIと組み合わせて利用するプラグインです。

「jQuery UI MultiSelect Widget」の導入手順

  1. jQuery UIのダウンロードページにアクセスします。
    http://jqueryui.com/download/
  2. デフォルトでは「Toggle All」にチェックが付いているので、チェックを外して今回必要な「Core」と「Widget」へチェックして「Download」ボタンを押下します。
    ※デザインを変更したい場合はページ下にある「Theme」でタブのデザインも選択可能です。今回は「UI lightness」を選択しています。
    MultiSelect_Widget 使い方1
    jQuery UI Tabs 手順2
  3. 「jQuery UI MultiSelect Widget」をダウンロードします。
    https://github.com/ehynds/jquery-ui-multiselect-widget
    MultiSelect_Widget 使い方2
  4. ダウンロードしたファイルの内、必要となるのは以下の通りです。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.8.3.js\jquery-ui-1.9.2.custom\jsjQuery本体
    jsjquery-ui-1.9.2.custom.min.js\jquery-ui-1.9.2.custom\jquery-ui-1.9.2.custom\development-bundle\ui\minified
    jsjquery.multiselect.js\jquery-ui-multiselect-widget-master\src
    jsprettify.js\jquery-ui-multiselect-widget-master\demos\assets
    cssjquery-ui-1.9.2.custom.min.css\jquery-ui-1.9.2.custom\css\custom-themejQuery UI用のスタイルシート
    cssjquery.multiselect.css\jquery-ui-multiselect-widget-master
    cssstyle.css\jquery-ui-multiselect-widget-master\demos\assets
    cssprettify.css\jquery-ui-multiselect-widget-master\demos\assets
    画像custom-theme
    ※選択したテーマによりフォルダ名は変わります
    \jquery-ui-1.9.2.custom\css\custom-theme\images
  5. サンプルソース「HTML」
  6. サンプルソース「jQuery」
    基本的にmultiselectメソッドを実行すればOKですが、オプションを指定する事でカスタマイズする事も可能です。
  7. 指定可能なオプション
    オプションデフォルト値説明
    headertruetrue:ドロップダウンリストのヘッダー部へ「Check all」、「Uncheck All」、「x」(閉じる)ボタンが表示されます。
    false:ドロップダウンリストのヘッダー部へ「Check all」、「Uncheck All」、「x」(閉じる)ボタンが表示されません。
    文字列を指定:指定した文字列が表示されます。文字列を指定した場合は「Check all」、「Uncheck All」、「x」(閉じる)ボタンは表示されません。
    height175px単位でのチェックボックスコンテナ(スクロール領域)の高さを指定します。
    minWidth225px単位で全体のウィジェットの最小幅を指定します。「auto」に設定すると無効になります。
    checkAllTextCheck all「Check all」ボタンのテキスト内容を指定します。
    uncheckAllTextUncheck All「Uncheck All」ボタンのテキスト内容を指定します。
    noneSelectedTextSelect optionsチェックボックスが一つも選択されていない場合のテキスト内容を指定します。
    selectedText# selectedオプションが選択されている場合、シャープ記号(#)が自動的に選択されたチェックボックスの数に置換されます。
    selectedListfalse
    showempty stringメニューを開く時に適用する効果を指定します。
    ・hide: "bounce"
    ・show: ["bounce", 200]
    hideempty stringメニューが閉じる時に適用する効果を指定します。
    ・hide: "explode"
    ・hide: ["explode", 1000]
    autoOpenfalsetrue:ウィジェットの初期化時に自動的にメニューが開きます。
    flase:ウィジェットの初期化時に自動的にメニューは開きません。
    multipletruetrue:チェックボックスが表示され、複数選択可能となります。
    false:チェックボックスが非表示となり1つのみ選択可能となります。
    classesempty stringカスタマイズする為にボタンとメニューの両方に適用するための追加クラスを指定します。
    positionempty objectドロップダウンメニューの表示位置を配置することができます。

実装例:複数選択可能なリストボックス(デフォルト状態)

実装例:複数選択可能なリストボックス(jQuery UI MultiSelect Widget 適用後)

    上記リストで複数選択した値を取得する場合は、従来のリストボックスで複数選択した値を取得する手法と同様の手段で取得可能となります。

    実装例

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">