jQuery Mobile ウィジェットにオプションを指定するデータ属性

jQuery Mobile では、HTML5のデータ属性を使ってウィジェットにスタイルを適用したり、さまざまな設定をします。これらのデータ属性はオプションであり、すべて省略可能です。この記事では各ウィジェットで使用可能なデータ属性の一覧を示します。

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

【コンテンツ】

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

ボタン

「data-role="button"」を指定したリンク要素です。button要素、ツールバーのリンク、input要素のボタンは自動的にボタンとしてのスタイルが適用されますので、
「data-role="button"」は不要です。
ボタンウィジェットはバージョン1.4からCSSクラスを用いた指定に変更になっており、
「data-role="button"」は非推奨となっています。

データ属性 説明
data-corners true | false ボタンに角丸をつけるかどうか
data-icon アイコンリスト参照 ボタンに表示するアイコン
デフォルトはアイコンなし
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-iconshadow true | false アイコンに影をつけるかどうか
バージョン1.4で非推奨、1.5で削除予定
data-inline true | false ボタンをインライン要素にするかどうか
data-mini true | false 小さいサイズにするかどうか
data-shadow true | false ボタンに影をつけるかどうか
data-theme swatch letter (a-z) 適用するスウォッチ

チェックボックス

label要素と「type="checkbox"」を指定した input要素のペアです。data-role属性は必要ありません。

データ属性 説明
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ

開閉式コンテンツ

「data-role="collapsible"」を指定したコンテナの中に、見出し要素(h1~h6)とコンテンツを含めたウィジェットです。

データ属性 説明
data-collapsed true | false ページロード時に閉じた状態にするかどうか
data-collapse-cue-text string 閉じる際にスクリーンリーダーソフトでユーザーに音声フィードバックを提供するためのテキストを指定。デフォルトは "click to collapse contents"
data-collapsed-icon アイコンリスト参照 閉じている状態のときに使うアイコン
デフォルトは "plus"
data-content-theme swatch letter (a-z) コンテンツに適用するスウォッチ
data-expand-cue-text string 開く際にスクリーンリーダーソフトでユーザーに音声フィードバックを提供するためのテキストを指定。デフォルトは "click to expand contents"
data-expanded-icon アイコンリスト参照 開いている状態のときに使うアイコン
デフォルトは "minus"
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-inset true | false 内包型の開閉コンテンツにするかどうか
trueの場合は角丸と余白がつく
data-mini true | false 小さいサイズにするかどうか
data-theme swatch letter (a-z) 適用するスウォッチ

開閉式コンテンツセット

「data-role="collapsibleset"」を指定したコンテナの中に、開閉式コンテンツを複数セット含めたものです。

データ属性 説明
data-collapsed-icon アイコンリスト参照 閉じている状態のときに使うアイコン
デフォルトは "plus"
data-content-theme swatch letter (a-z) コンテンツに適用するスウォッチ
data-expanded-icon アイコンリスト参照 開いている状態のときに使うアイコン
デフォルトは "minus"
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-inset true | false 内包型の開閉コンテンツにするかどうか
trueの場合は角丸と余白がつく
data-mini true | false 小さいサイズにするかどうか
data-theme swatch letter (a-z) 適用するスウォッチ

コントロールグループ

複数のボタンをグループ化するために、divあるいはfieldset要素に
「data-role="controlgroup"」を指定しコンテナにしたものです。

データ属性 説明
data-exclude-invisible true | false 不可視の子要素を除外するかどうか
data-mini true | false 小さいサイズにするかどうか
data-theme swatch letter (a-z) 適用するスウォッチ
data-type horizontal | vertical 項目の並びを横にするか縦にするか

ダイアログ

「data-role="dialog"」と指定したコンテナか、a要素(アンカーリンク)に
「data-rel="dialog"」と指定したリンク先ページです。

データ属性 説明
data-close-btn left | right | none 閉じるボタンの表示位置
data-close-btn-text string 閉じるボタンのテキスト
デフォルトは "close"
data-corners true | false ダイアログに角丸をつけるかどうか
data-dom-cache true | false DOMツリーにページをキャッシュしておくかどうか
data-overlay-theme swatch letter (a-z) ダイアログのオーバーレイ(背景)に適用するスウォッチ
data-theme swatch letter (a-z) 適用するスウォッチ
data-title string ダイアログのタイトル

性能向上

jQuery Mobile は、デフォルトではウィジェットに適切なスタイルを自動的に適用し、ページ遷移はAjaxで行います。
これらを無効にするため「data-enhance="false"」あるいは「data-ajax="false"」を指定することができます。

データ属性 説明
data-enhance true | false ページにスタイルを自動的に適用するかどうか
data-ajax true | false Ajaxを利用するかどうか

フリップスイッチ

2つのoption要素を持ち、「data-role="slider"」を指定したselect要素です。

データ属性 説明
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ
data-track-theme swatch letter (a-z) トラックに適用するスウォッチ

リンク

すべてのアンカーリンクです。「data-role="button"」を指定したボタンやフォームの送信ボタンも含みます。

データ属性 説明
data-ajax true | false Ajaxを利用するかどうか
data-direction reverse 逆方向のTransitionアニメーション(ページとダイアログのみ有効)
data-dom-cache true | false DOMツリーにページをキャッシュしておくかどうか
data-prefetch true | false DOMツリーにページをプリフェッチしておくかどうか
data-rel back | dialog | external | popup リンクがどのようにふるまうかのオプション
back: 履歴がひとつ前に戻る
dialog: ダイアログでリンク先をオープン
external: 他のドメインへのリンク
popup: ポップアップをオープン
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ページ遷移のエフェクト設定
data-position-to origin | jQuery selector | window ポップアップの表示位置
origin: リンクの上
jQuery selector: 特定の要素の上
window: ウィンドウのセンター

リスト

「data-role="listview"」を指定した ol要素もしくは ul要素です。

データ属性 説明
data-autodividers true | false 自動区切りを挿入するかどうか
data-count-theme swatch letter (a-z) カウンターに適用するスウォッチ
data-divider-theme swatch letter (a-z) 区切りに適用するスウォッチ
data-filter true | false 検索フィルターを追加するかどうか
data-filter-placeholder string 検索フィルターに表示しておくテキスト
デフォルトは "Filter items..."
data-filter-theme swatch letter (a-z) 検索フィルターに適用するスウォッチ
data-header-theme swatch letter (a-z) 見出しに適用するスウォッチ
data-icon アイコンリスト参照 リストに表示するアイコン
data-inset true | false 内包型のリストにするかどうか
trueの場合は角丸と余白がつく
data-split-icon アイコンリスト参照 分割ボタンリストのアイコン
デフォルトは "carat-r"
data-split-theme swatch letter (a-z) 分割ボタンに適用するスウォッチ
data-theme swatch letter (a-z) リストに適用するスウォッチ

リストアイテム

リストの中の li要素です。

データ属性 説明
data-filtertext string フィルターに使用するテキスト
data-icon アイコンリスト参照 リストアイテムに表示するアイコン
data-role list-divider 区切りの設定
data-theme swatch letter (a-z) リストアイテムに適用するスウォッチ

ナビゲーションバー

「data-role="navbar"」を指定したコンテナの中の li要素です。

データ属性 説明
data-iconpos left | right | top | bottom | notext アイコンの表示位置

ページ

「data-role="page"」を指定したコンテナです。

データ属性 説明
data-dom-cache true | false DOMツリーにページをキャッシュしておくかどうか
data-overlay-theme swatch letter (a-z) ダイアログとしてオープンしたページのオーバーレイ(背景)に適用するスウォッチ
data-theme swatch letter (a-z) ページに適用するスウォッチ
data-title string ページが表示されたときのタイトル
data-url url ページ遷移したときアドレスバーに表示するURLの指定

ポップアップ

「data-role="popup"」を指定したコンテナです。

データ属性 説明
data-corners true | false ポップアップに角丸をつけるかどうか
data-dismissible true | false ポップアップの外側をクリックしたときポップアップを閉じるかどうか
data-history true | false ブラウザの履歴にポップアップを加えるかどうか
falseのときはブラウザの戻るボタンでポップアップを閉じることができない
data-overlay-theme swatch letter (a-z) ポップアップのオーバーレイ(背景)に適用するスウォッチ
デフォルトは "null"(透過背景)
data-position-to origin | jQuery selector | window ポップアップの表示位置
origin: リンクの上
jQuery selector: 特定の要素の上
window: ウィンドウのセンター
data-shadow true | false ポップアップに影をつけるかどうか
data-theme swatch letter (a-z) 適用するスウォッチ
data-tolerance 30,15,30,15 ウィンドウの4つのコーナー(top, right, bottom, left)からの距離
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ポップアップが現れるとき/消えるときのエフェクト設定

「data-rel="popup"」を指定したアンカーリンクは、リンク先ページをポップアップでオープンします。以下はアンカーリンクに設定するデータ属性です。

データ属性 説明
data-position-to origin | jQuery selector | window ポップアップの表示位置
origin: リンクの上
jQuery selector: 特定の要素の上
window: ウィンドウのセンター
data-rel popup ポップアップをオープン
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ポップアップが現れるとき/消えるときのエフェクト設定

ラジオボタン

label要素と「type="radio"」を指定した input要素のペアです。data-role属性は必要ありません。

データ属性 説明
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ

セレクトメニュー

すべてのselect要素です。data-role属性は必要ありません。

データ属性 説明
data-divider-theme swatch letter (a-z) 区切りに適用するスウォッチ
data-icon アイコンリスト参照 セレクトメニューのアイコン
デフォルトは "carat-d"
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-inline true | false インライン要素にするかどうか
data-mini true | false 小さいサイズにするかどうか
data-native-menu true | false OS独自のセレクトメニューを使用するかどうか
data-overlay-theme swatch letter (a-z) jQuery Mobileのセレクトメニューに適用するスウォッチ
「data-native-menu="false"」の指定が必要
data-placeholder true | false 選択前に表示するoption要素に指定
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ

スライダー

「type="range"」を指定した input要素です。data-role属性は必要ありません。

データ属性 説明
data-highlight true | false 値を示すトラック部分を塗りつぶしてハイライトするかどうか
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ
data-track-theme swatch letter (a-z) トラックに適用するスウォッチ

テキスト入力

「type="text | number | search | etc."」を指定した input要素、あるいはtextarea要素です。data-role属性は必要ありません。

データ属性 説明
data-clear-btn true | false クリアボタンをつけるかどうか
data-clear-btn-text string クリアボタンのテキスト
デフォルトは "clear text"
data-mini true | false 小さいサイズにするかどうか
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ

ツールバー(ヘッダー/フッター)

「data-role="header"」あるいは「data-role="footer"」を指定したコンテナです。

データ属性 説明
data-add-back-btn true | false 戻るボタンをつけるかどうか(header only)
data-back-btn-text string 戻るボタンのテキスト(header only)
data-back-btn-theme swatch letter (a-z) 戻るボタンに適用するスウォッチ(header only)
data-id string 固定フッターのためにユニークIDを設定
data-position fixed 固定ヘッダー/フッターの設定
data-theme swatch letter (a-z) 適用するスウォッチ

固定ツールバー

「data-role="header"」あるいは「data-role="footer"」を指定したコンテナで、
「data-position="fixed"」を設定した場合です。

データ属性 説明
data-disable-page-zoom true | false ユーザーにページのズーム変更を許可するかどうか
data-fullscreen true | false フルスクリーンモードにするかどうか
data-tap-toggle true | false タップ or クリックのトグルでツールバーの表示/非表示を有効にするかどうか
data-transition slide | fade | none タップ or クリックの際のツールバー表示/非表示エフェクト設定
data-update-page-padding true | false ツールバーの高さにあわせてページトップとボトムのpaddingを更新するかどうか
data-visible-on-page-show true | false 親ページが表示されたときのツールバー表示設定

バージョンアップに伴いデータ属性の仕様は変更になる場合がありますので、
最新情報は公式ページで確認しましょう。

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

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ