jQuery Mobile チェックボックスを設置する

チェックボックスは、オプション選択などをユーザーにしてもらうためのフォーム部品です。jQuery Mobile ではチェックボックスのタップ領域を大きくして、スマートフォンでもタップしやすいデザインにしています。

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

【コンテンツ】

  1. 使用するデータ属性
  2. 基本的な設置方法
  3. フィールドコンテナ
  4. チェックボックスグループ
  5. オプション指定

【記事執筆時の環境】
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="checkbox"」を指定します。
対応する label要素もあわせて記述し、label要素の for属性には input要素の idを指定します。

基本的なチェックボックス

フィールドコンテナ

チェックボックスについての説明分を加えるには、fieldset要素で囲み、legend要素に記述します。
fieldset要素には「data-role="controlgroup"」を指定します。

フィールドコンテナで囲んだチェッボックス

チェックボックスグループ

チェックボックスは多くの場合、複数設けられます。
フィールドコンテナでそれらを囲んでいる場合、チェックボックスは1つのグループとなります。それぞれのチェックボックスの間に余白はできず、角丸のついた1つのボックスとして表示されます。

縦に並ぶグループ

デフォルトではチェックボックスが縦に並ぶグループとなります。

縦に並んだチェックボックスグループ

横に並ぶグループ

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

横に並んだチェックボックスグループ

オプション指定

ミニサイズにする

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

ミニサイズのチェックボックス

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

アイコン(チェックをつけるボックス)の位置は、デフォルトでは左です。
fieldset要素に data-iconpos属性を指定すると、位置を変更できます。

アイコン位置を右にしたチェックボックス

テーマを変更する

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

テーマを変更したチェックボックス

jQuery Mobile のチェックボックスウィジェットはタップ領域が広くとられるので、スマートフォンでの操作性が良いUI要素となっています。またグループ化はコンパクトにまとめられて便利な機能です。

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

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ