*

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

公開日: : 最終更新日: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)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

<select>により項目選択

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

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑