スポンサーリンク
スポンサーリンク

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボックスかを分けて作成しなければなりません。ですが、今回書く、<select>による選択はでは、どちらのときも同じウィジェットで作成できます。でsyが、ウィジェットでの表示は、画面が小さい端末にも対応するため、選択肢が画面内に表示しきれない時は、それらがダイアログとして表示されます。

一方で、選択肢が2つしかないときはトグルスイッチというウィジェットで表示する方がユーザーによって分かりやすいと思います。

<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>は、複数の値から1つか複数を選択する操作を行う部品を表すタグです。jQueryMobileでは、この操作を行うウィジェットを2種類作成できます。

  • 選択肢のポップアップ
  • ウィジェットのデフォルトでは、値を選択する時、選択肢はウィジェットの下に表示されますが、この部分のデザインはウィジェットの部分とは大きく違います。そこでdata-native-menu=”false”を設定し選択肢とウィジェットのデザインを統一できます。ポップアップはウィジェットがクリックされた時だけウィジェットを覆うように表示されます。値を設定済み(selected)のときは、その選択肢だけ異なった色で表示されます。

    その後、選択肢のどれかが、ポップアップの外側をタップかクリックされたときに、ポップアップが消えます。選択肢がクリックされた時は、ポップアップが消えるのと同時にウィジェットの表示が選択肢の文字列に変わります。

    サンプルコードの実行結果でポップアップの項目選択に表示されている「選択してください」という項目を選択すると良くないので、data-placeholder属性を設定します。ただ、data-placeholder属性がないときは、<select>内の先頭にvalue属性が<option>があれば、それがplaceholderとしてみなされます。またplaceholderが<option></option>のように作成されていて、タグ間に文字列が存在しない場合は、選択肢の表示が空欄となります。

    サンプルコードの実行結果はこちら

jQueryMobile 項目を複数選択したり、見出しをつける
項目,複数選択,data-native-menu=”false”

  • 複数選択の場合
  • <select multiple>のときは、値を同時に複数選択することができます。だた、ポップアップにより選択できるようにしたいときはdata-native-menu=”false”を同じ<select>タグに設定する必要があります。

    値を選択すると右端にレ印が表示されて、同じ値をまたクリックするとレ印が消えます。選択が終了したら左上の×印かポップアップの外側をクリックかタップして消去できます。ポップアップが消去されたあとは、選択されたあチアがカンマ区切りで表示され、値が選択された数も小さい数値で表示されます。

  • 見出しによるグループ分け
  • 選択肢が多く、見出しによるグループ分けが必要な時は、同じグループに属する<option>を<optgroup>タグで囲みます。グループの名称はlabel属性に設定します。

    サンプルコードの実行結果はこちら

  • 選択肢をダイアログ表示
  • サンプルコードのコメントアウトを消して、選択肢が多くなったとき、ポップアップが画面全体を覆う場合は、ダイアログによる表示に切り替わります。ウィジェットがクリック・タップされると画面が遷移することになります。このダイアログではタイトルが表示される文字列に対応す<label>~<label>間の文字列になります。placeholderは表示されません。

    ダイアログで値を選択すると前のページに戻ります。値を選択しないで戻るには、×印をクリック・タップするか、端末で戻る操作をします。

コメント

タイトルとURLをコピーしました