jQuery Mobile ウィジェットにオプションを指定するデータ属性
公開日：2014年10月10日
最終更新日：2014年11月8日
jQuery Mobile では、HTML5のデータ属性を使ってウィジェットにスタイルを適用したり、さまざまな設定をします。これらのデータ属性はオプションであり、すべて省略可能です。この記事では各ウィジェットで使用可能なデータ属性の一覧を示します。
«次の特集記事» jQuery Mobile ウィジェットにスタイルを指定するクラス
«前の特集記事» jQuery Mobile ページを構成するUI要素(ウィジェット)の指定方法
【コンテンツ】
【記事執筆時の環境】
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を利用するかどうか |
フリップスイッチ
２つの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 | ウィンドウの４つのコーナー(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 ウィジェットにスタイルを指定するクラス
«前の特集記事» jQuery Mobile ページを構成するUI要素(ウィジェット)の指定方法
スポンサーリンク
