ボタンによる選択では、１つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボックスかを分けて作成しなければなりません。ですが、今回書く、<select>による選択はでは、どちらのときも同じウィジェットで作成できます。でｓｙが、ウィジェットでの表示は、画面が小さい端末にも対応するため、選択肢が画面内に表示しきれない時は、それらがダイアログとして表示されます。
一方で、選択肢が２つしかないときはトグルスイッチというウィジェットで表示する方がユーザーによって分かりやすいと思います。
| 要素 | 属性 | 設定 | 補足 |
|---|---|---|---|
| <select> | data-role="fieldcontain" | 複数ウィジェットをグループ化 | |
| data-inline="true|false" | ウィジェットをラベルの右に表示 | ||
| data-native-menu="true|false" | リストをウィジェットの下に表示 | ||
| <option> | data-placeholder="true|false" | 先頭の選択肢をプレースホルダーとして扱う | |
| アイコン | data-icon="アイコン名称" | 表示するアイコンの種類 | |
| data-iconpos="left|right|top|bottom|notext" | iconの表示位置 | ||
| テーマ | data-theme="a～b" | ウィジェットのテーマ | "a"～"b"まで設定できる |
| data-overlay-theme="a～b" | ダイアログの背景のテーマ | ||
| data-track-theme="a～b" | トグルスイッチのテーマ |
選択項目(selectmenuウィジェット)
<select>は、複数の値から１つか複数を選択する操作を行う部品を表すタグです。jQueryMobileでは、この操作を行うウィジェットを２種類作成できます。
- 選択肢のポップアップ
ウィジェットのデフォルトでは、値を選択する時、選択肢はウィジェットの下に表示されますが、この部分のデザインはウィジェットの部分とは大きく違います。そこでdata-native-menu="false"を設定し選択肢とウィジェットのデザインを統一できます。ポップアップはウィジェットがクリックされた時だけウィジェットを覆うように表示されます。値を設定済み(selected)のときは、その選択肢だけ異なった色で表示されます。
その後、選択肢のどれかが、ポップアップの外側をタップかクリックされたときに、ポップアップが消えます。選択肢がクリックされた時は、ポップアップが消えるのと同時にウィジェットの表示が選択肢の文字列に変わります。
サンプルコードの実行結果でポップアップの項目選択に表示されている「選択してください」という項目を選択すると良くないので、data-placeholder属性を設定します。ただ、data-placeholder属性がないときは、<select>内の先頭にvalue属性が<option>があれば、それがplaceholderとしてみなされます。またplaceholderが<option></option>のように作成されていて、タグ間に文字列が存在しない場合は、選択肢の表示が空欄となります。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 項目選択とトグルスイッチ</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <!-- デフォルトのウィジェット --> <label for="city">都市名</label> <select id="city" name="city" data-native-menu="false"> <option value="#" data-placeholder="true">選択してください</option> <option value="#tokyo">東京</option> <option value="#osaka">大阪</option> <option value="#yokohama">横浜</option> </select> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
jQueryMobile 項目を複数選択したり、見出しをつける
項目,複数選択,data-native-menu="false"
- 複数選択の場合
- 見出しによるグループ分け
- 選択肢をダイアログ表示
<select multiple>のときは、値を同時に複数選択することができます。だた、ポップアップにより選択できるようにしたいときはdata-native-menu="false"を同じ<select>タグに設定する必要があります。
値を選択すると右端にレ印が表示されて、同じ値をまたクリックするとレ印が消えます。選択が終了したら左上の×印かポップアップの外側をクリックかタップして消去できます。ポップアップが消去されたあとは、選択されたあチアがカンマ区切りで表示され、値が選択された数も小さい数値で表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 項目選択とトグルスイッチ</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <label for="city">都市名</label> <select id="city" name="city" data-native-menu="false" multiple> <option value="#" data-placeholder="true">選択してください</option> <option value="#tokyo">東京</option> <option value="#osaka">大阪</option> <option value="#yokohama">横浜</option> </select> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
選択肢が多く、見出しによるグループ分けが必要な時は、同じグループに属する<option>を<optgroup>タグで囲みます。グループの名称はlabel属性に設定します。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 項目選択とトグルスイッチ</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <label for="city">日本の都市名</label> <select id="city" name="city" data-native-menu="false" multiple> <option value="#" data-placeholder="true">選択してください</option> <optgroup label="関東"> <option value="#tokyo">東京</option> <option value="#yokohama">横浜</option> </optgroup> <optgroup label="近畿"> <option value="#osaka">大阪</option> <option value="#kyoto">京都</option> </optgroup> <!-- 選択肢が多くなると、ダイアログに切り替わる。 <optgroup label="中国"> <option value="#osaka">岡山</option> <option value="#tottori">鳥取</option> <option value="#izumo">出雲</option> <option value="#hiroshima">広島</option> <option value="#hagi">萩</option> <option value="#simonoseki">下関</option> </optgroup> <optgroup label="四国"> <option value="#tokushima">徳島</option> <option value="#ehime">愛媛</option> <option value="#kochi">高知</option> <option value="#takamatsu">高松</option> </optgroup> --> </select> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
サンプルコードのコメントアウトを消して、選択肢が多くなったとき、ポップアップが画面全体を覆う場合は、ダイアログによる表示に切り替わります。ウィジェットがクリック・タップされると画面が遷移することになります。このダイアログではタイトルが表示される文字列に対応す<label>～<label>間の文字列になります。placeholderは表示されません。
ダイアログで値を選択すると前のページに戻ります。値を選択しないで戻るには、×印をクリック・タップするか、端末で戻る操作をします。