jQuery Mobile逆引きリファレンス
Selectmenuウィジェットで選択メニューを作成するには？
複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン／チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
選択メニューは複数の選択肢から単一／複数のオプションを選択させるための部品です。ラジオボタン／チェックボックスにも似ていますが、これらが最初から全てのオプションを画面に表示しているのに対して、選択メニューはタップして初めて選択肢がポップアップします。その性質上、選択肢の個数が増えても、ページデザインに影響を与えないという特長があります。半面、選択するのに最低でも2回のタップが必要となりますので、わずかとはいえ操作は回りくどいです。それぞれの特徴を理解して、使い分けてください。
選択メニューの基本
まずは、基本的な選択メニューの例からです。jQuery Mobileでは、標準的な<select>／<option>要素に対して、デフォルトでSelectmenuウィジェットを適用し、リッチなボックスを生成します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form method="POST" action="">
<div class="ui-field-contain">
<label for="entry_book">書籍：</label>
<select id="entry_book" name="entry_book">
<option value="js">JavaScript本格入門</option>
<option value="android">はじめてのAndroidアプリ</option>
<option value="rails">Rails 4プログラミング</option>
<option value="aspnet">独習ASP.NET</option>
</select>
</div>
</form>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
［JavaScript本格入門］ボックスをタップ
ただし、デフォルトで表示される選択メニューにはいくつかの問題もあります。まず、整形するのはボックス部分だけなので、選択リストの表示は環境に依存します。例えば、以下はデスクトップ版のChromeで選択メニューを表示した場合の結果です。
また、複数選択の機能が環境によっては正しく動作しません。例えば、以下は<select>要素に対してmultiple属性を付与した上で、デスクトップ版Chromeで表示した結果です。選択メニューがポップアップされず、機能そのものが動作しなくなっています。
カスタムメニュー機能を有効化
そのような問題を改善するには、<select>要素に対して「data-native-menu="false"」属性を付与します。これによって、カスタムメニュー機能が有効になり、選択オプションのリストも整形されるようになります。
以下は、カスタムメニュー機能を使った選択メニューの例です。
|
<select id="entry_book" name="entry_book" data-native-menu="false" multiple>
<option>選択してください。</option>
<optgroup label="JavaScript">
<option value="jq10">10日でおぼえるjQuery入門教室</option>
<option value="jslib">JavaScriptライブラリ実践活用</option>
<option value="js">JavaScript本格入門</option>
</optgroup>
<optgroup label="スマホ">
<option value="iphone">iPhone開発ポケットリファレンス</option>
<option value="mjava">AndroidエンジニアのためのモダンJava</option>
<option value="android">はじめてのAndroidアプリ開発</option>
</optgroup>
<optgroup label="サーバー技術">
<option value="rails">Rails 4アプリケーションプログラミング</option>
<option value="aspnet">独習ASP.NET</option>
<option value="php10">10日でおぼえるPHP入門教室</option>
</optgroup>
</select>
|
カスタムメニューには、以下のような利点があります。
- 環境によらず、選択リストが同じ外観に整形される
- 選択オプションのグループ化やプレイスホルダーなどを環境によらず、安定的に利用可能に（ネイティブな環境では未対応か、動作が不安定な場合も）
- 選択オプションにチェックボックスが付与され、複数選択が可能に
- 長いリストの場合は、リストがポップアップするので見やすい
プレイスホルダーとは、空値の選択オプションで、ヘッダーとしての役割を果たします。標準の選択メニューでも利用できますが、他の選択オプションと変わらず、選択できる状態となっており、見た目にもあまり使い勝手はよくありません。しかし、カスタムメニューではそもそもプレイスホルダーは選択できない状態になっており、ヘッダーであることがより明確になります。
プレイスホルダーは、以下のいずれかの条件を満たしている必要があります。
- <option>要素がvalue属性を持たない
- <option>要素がテキストを持たない
- <option>要素が「data-placeholder="true"」属性を持つこと
基本的には、制限を持つネイティブな選択メニューよりも、まずはカスタムメニューを利用することをお勧めします。ただし、カスタムメニューはネイティブな選択メニューよりもオーバーヘッドが高いという問題もあります。ページにたくさんのカスタムメニューを配置するのは避けてください。
Selectmenuウィジェットの主なパラメーター
Selectmenuウィジェットには、以下のようなパラメーターがあります。
| 分類 | パラメーター | 概要 | デフォルト値 |
|---|---|---|---|
| 基本 | data-corners | 角丸とするか | true |
| data-shadow | 影効果を有効にするか | true | |
| data-close-text |  ボタンの補助テキスト |
Close | |
| data-inline | インラインモードで表示するか | false | |
| data-mini | コンパクトモードで表示するか | false | |
| アイコン | data-icon | 選択ボックスのアイコン | carat-d |
| data-iconpos | アイコンの表示位置 | right | |
| テーマ | data-theme | 選択メニューに適用されるテーマ | 親から継承 |
| data-divider-theme | グループの区切りに適用されるテーマ | 親から継承 | |
| data-overlay-theme | ポップアップメニューの外枠 | 親から継承 |
以下は、それぞれのパラメーターを適用した例と、その結果です。
|
<select id="entry_book" name="entry_book"
data-native-menu="false" multiple
data-corners="false" data-icon="star"
data-iconpos="top" data-theme="b" data-divider-theme="a"
data-overlay-theme="a">
……中略……
</select>
|
［選択してください。］をタップ
※以下では、本稿の前後を合わせて5回分（第19回～第23回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
19. Checkboxradioでラジオボタン／チェックボックスを作成するには？
標準のラジオボタン／チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。
20. Flipswitchウィジェットでオン／オフ選択のためのフリップスイッチを作成するには？
オン／オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。
21. 【現在、表示中】≫ Selectmenuウィジェットで選択メニューを作成するには？
複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン／チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。
22. jQuery Mobileで入力フォームを設置するには？
jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。
23. Textinputウィジェットでテキスト入力ボックスを設置するには？
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
