*

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

公開日: : 最終更新日: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

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑