*

<select>により項目選択

公開日: : 最終更新日:2016/05/12 jQueryMobile , , , ,

ボタンによる選択では、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は表示されません。

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

スポンサードリンク

関連記事

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

no image

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


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



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑