第11回 Tips1 セレクトメニューの複数選択をわかりやすくしたい

2011.5.17 TUE

Tips 1

セレクトメニューの複数選択をわかりやすくしたい

CSS／JavaScript

	＞＞		point　プラグインを使って実装可能
	＞＞		point　jQuery UIを使用してデザインをカスタマイズ可能

セレクトメニューを使用している際に、項目を複数選択できる場面は多々あるだろう。複数選択は⌘（Ctrl）キーを押しながらクリックすることで選択することは可能だ。このことは知っていれば簡単であるが、サイトを訪れた人が知らない場合も考えられ、Webサイトの想定ターゲットによってはやり方を注記しておく必要があるだろう。そういった複数選択をだれでも使いやすく、わかりやすくする方法を紹介しよう【1】。「jQuery UI Multiselect」（michael.github.com/multiselect/）で紹介されている「ui.multiselect.js」を見ていこう。

【1】［＋］をクリックして選択が可能だ

このカスタマイズにはjQuery UIが必要だ。「michael's multiselect at master - GitHub」（github.com/michael/multiselect）の「download」からダウンロードしよう。まず、HTMLに CSS、JavaScriptを読み込んでおく【2】。複数要素が選択可能なselect要素を作成して、class名は「multiselect」にしておこう。jQuery UIの基本テーマ用CSSも読み込んであるので忘れないように注意しよう。最後にclass名が「multiselect」の部分に反映されるようにjQueryで指定【3】しておくと、1カラムだったセレクトメニューが2カラムで表示される。左側には選択済みの項目。右側には選択されていない項目が並んでいる。

【2】jQuery UI、プラグインを読み込んでおく

【3】jQueryでセレクタを指定しておこう

このプラグインはjQuery UIを使用してスタイリングしているので、jQuery UI Themeを使用してデザインテイストを調整することが可能だ。サンプルでは「smoothness」のthemeを読み込んで表示している【4】。ここの themeについては、jQuery UI側で用意されているものに変更することでカスタマイズできる。

【4】使用するThemeを指定できる

また、参考サイトからダウンロードしたサンプルを確認すると、HTML内でjQuery UIのthemerollerに関係するJavaScriptが読み込まれているのがわかるだろう【5】。このJavaScriptを読み込んだうえで、 JavaScriptに【6】のように書くことで、

の部分にThemeを選択できるセレクトメニューが表示される。JavaScriptの読み込み時に【7】のようにオプションを指定することでデフォルトのThemeを指定することも可能だ。