*

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

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

値を選択するボタンは以下の2つがあります。

・複数の値から1つだけを選択するウィジェット ラジオボタン
・いくつかの値を同時に選択できるウィジェット チェックボックス

これらによる値の選択はクリックかタップでします。デスクトップ画面で表示しているときは、マウスのカーソルが重なると、その位置の選択肢の表示に変化が起きます。これらは同じ種類でのグループ化が可能で、縦、横それぞれに並べて表示できます。レイアウトをするときに必須なのが、<legend>と<label>タグです。<legend>タグは、フィールドのグループ(<fieldset>)を表す名前を設定するもので、表示位置は画面のレイアウト次第ですが、変更することもできます。<label>は、ラジオボタンとチェックボックスにせっていされた選択肢を表す文字列を設定します。

  • ラジオボタン(<input type=”radio”>)
  • ラジオボタンは、name属性の値が同じものが複数集まり同じグループの選択肢となります。同じグループ同士の物をひとつのものとし表示すれば、選択肢のグループを分かりやすく表示できます。

  • チェックボックス(<input type=”checkbox”>)
  • チェックボックスもラジオボタンと同じようにボタンで表示されてグループ化できます。
    選択されている状態はレ印のアイコンで表します。横一列でグループ化したときは、選択されたことをレ印ではなくて色で表します。このとき見た目ではラジオボタンと判別ができないので複数選択が可能であることを<legend>で見出しをつけると良いです。

  • <legend>の表示位置を設定する
  • 同じグループに属するラジオボタン、チェックボックスを<fieldset>~</fieldset>で囲むとき、その部分の見出しを<legend>によって表示できます。デフォルトでは<legend>~</legend>間の文字列はウィジェットのすぐ上にひゅおじされますが、data-role=”fieldcontain”が設定されると、その文字列がウィジェットの左に表示されます。

  • テーマを設定する
  • ラジオボタン、チェックボックスにテーマを設定するには、それ自身の<input>にdata-theme属性を設定します。

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

スポンサードリンク

関連記事

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

ボタンを設定する

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

スポンサードリンク

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 ↑