jQuery Mobile ラジオボタンを設置する

ラジオボタンは、複数の項目から1つだけをユーザーに選択してもらうためのフォーム部品です。jQuery Mobile ではチェックボックス同様、ラジオボタンのタップ領域を大きくして、スマートフォンでもタップしやすいデザインにしています。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 使用するデータ属性
  2. 基本的な設置方法
  3. ラジオボタングループ
  4. オプション指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

使用するデータ属性

データ属性 説明
data-corners true | false 角丸をつけるかどうか
data-disabled true | false チェックできないようにするかどうか
data-iconpos left | right | top | bottom | none | notext アイコンの表示位置
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ
data-type horizontal | vertical グループの並び方向

基本的な設置方法

ラジオボタンは input要素に「type="radio"」を指定します。組となる項目の name属性にはすべて同じ値を記述します。初期状態でチェックをつける項目には、「checked」を指定しておきます。
対応する label要素もあわせて記述し、label要素の for属性には input要素の idを指定します。

基本的なラジオボタン

ラジオボタングループ

チェックボックスと同様、ラジオボタンもフィールドコンテナで囲むと1つのグループとなります。それぞれのラジオボタンの間に余白はできず、角丸のついた1つのボックスとして表示されます。

縦に並ぶグループ

デフォルトではラジオボタンが縦に並ぶグループとなります。

縦に並んだラジオボタングループ

横に並ぶグループ

fieldset要素に「data-type="horizontal"」を指定すると、横に並ぶグループになります。
この場合はチェックをつける丸いアイコンは表示されません。

横に並んだラジオボタングループ

オプション指定

ミニサイズにする

fieldset要素に「data-mini="true"」を指定すると、ミニサイズになります。

ミニサイズのラジオボタン

アイコンの位置を変更する

アイコンの位置は、デフォルトでは左です。
fieldset要素に data-iconpos属性を指定すると、位置を変更できます。

アイコン位置が右のラジオボタン

テーマを変更する

data-theme属性でテーマ(スウォッチ)を変更できます。
fieldset属性に指定すると全体が変更されますが、input要素に指定し個別に変更することもできます。

テーマを変更したラジオボタン

ラジオボタンはとにかくどれか1つにチェックしてもらわなくてはならないので、グループにしておくとコンパクトだし分かりやすいインターフェースになりますね。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ