jQuery Mobile データ属性

jQueryデータ属性

jQuery MobileはHTML5のdata-*属性を使用して、モバイルデバイス向けに「タッチフレンドリー」で美しい外観を作成します。

以下の参照リストでは、太字の値がデフォルト値を示します。

ボタン

data-role="button"を持つリンクです。ツールバーのボタン要素やリンクおよび入力フィールドは、自動的にボタンのスタイルが設定されますので、data-role="button"は必要ありません。

Data 属性 値 説明
data-corners true | false ボタンに丸みを帯びた角があるかどうかを定義します。
data-icon アイコンリファレンス ボタンのアイコンを定義します。デフォルトではアイコンはありません。
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-iconshadow true | false ボタンアイコンに影があるかどうかを定義します。
data-inline true | false ボタンが行内にあるかどうかを定義します。
data-mini true | false ボタンのサイズが小さいものか通常のサイズのものかを定義します。
data-shadow true | false ボタンに影があるかどうかを定義します。
data-theme letter (a-z) ボタンのテーマカラーを定義します。

ヒント：複数のボタンを組み合わせる場合、水平または垂直にボタンを組み合わせるために、data-role="controlgroup"およびdata-type="horizontal|vertical"属性を持つコンテナを使用してください。

チェックボックス

labelとtype="checkbox"のinputはペアで成り立っています。data-roleが不要で自動的にボタンのスタイルに設定されます。

Data 属性 値 説明
data-mini true | false チェックボックスが小さいサイズのものか通常のサイズのものかを指定。
data-role none jQuery Mobileがチェックボックスをボタンのスタイルに設定しないようにする。
data-theme letter (a-z) チェックボックスのテーマカラーを指定。

ヒント：複数のチェックボックスを組み合わせる場合、data-role="controlgroup"およびdata-type="horizontal|vertical"を使用して、水平または垂直にチェックボックスを組み合わせます。

折りたたみ可能

タイトル要素。その後はdata-role="collapsible"属性を持つコンテナ内の任意のHTMLマークアップが続きます。

Data 属性 値 説明
data-collapsed true | false 内容が閉じるべきか、展開すべきかを指定。
data-collapsed-icon アイコンリファレンス 折りたたみ可能なボタンのアイコン。デフォルトは「プラス」です。
data-content-theme letter (a-z) 折りたたみ可能なコンテンツのテーマカラーを指定。同時に折りたたみ可能なコンテンツに丸みを加えます。
data-expanded-icon アイコンリファレンス 展開された時の折りたたみ可能なボタンのアイコン。デフォルトは「マイナス」です。
data-iconpos left | right | top | bottom アイコンの位置を指定します。
data-inset true | false 折りたたみ可能なボタンが丸みを帯びてるか、マージンを持つスタイルを持つかを指定。
data-mini true | false 折りたたみ可能なボタンの小さいサイズのものか通常のサイズのものかを指定。
data-theme letter (a-z) 折りたたみ可能なボタンのテーマカラーを指定。

折りたたみ可能セット

data-role="collapsible-set"属性を持つコンテナ内の折りたたみ可能なコンテンツブロック。

Data 属性 値 説明
data-collapsed-icon アイコンリファレンス 折りたたみ可能なボタンのアイコン。デフォルトは「プラス」です。
data-content-theme letter (a-z) 折りたたみ可能なコンテンツのテーマカラーを指定。
data-expanded-icon アイコンリファレンス 展開された時の折りたたみ可能なボタンのアイコン。デフォルトは「マイナス」です。
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-inset true | false 折りたたみ可能なボタンが丸みを帯びてるか、マージンを持つスタイルを持つかを指定。
data-mini true | false 折りたたみ可能なボタンの小さいサイズのものか通常のサイズのものかを指定。
data-theme letter (a-z) 折りたたみ可能なセットのテーマカラーを指定。

コンテンツ

data-role="content"属性を持つコンテナ。

Data 属性 値 説明
data-theme letter (a-z) コンテンツのテーマカラーを指定。デフォルトは"c"です。

コントロールグループ

data-role="controlgroup"属性を持つ<div>または<fieldset>コンテナ。リンクのボタン、ラジオボタン、チェックボックス、選択メニューを一つのインプット（ボタンのスタイルのインプット）で複数組み合わせます。

Data 属性 値 説明
data-mini true | false 組み合わせが小さいサイズのものか通常のサイズのものかを指定。
data-type horizontal | vertical 水平または垂直に表示する組み合わせを指定。

ダイアログ

data-role="dialog"のコンテナまたはdata-rel="dialog"のリンク。

Data 属性 値 説明
data-close-btn-text sometext ダイアログの閉じるボタンのテキストを定義します。
data-dom-cache true | false 個別ページに対してjQuery DOMキャッシュをクリアするかどうかを定義します（設定がtrueの場合、DOMの管理に注意し、すべてのモバイルデバイスで完全にテストしてください）。
data-overlay-theme letter (a-z) 対話ページの上層（背景）色を規定します。
data-theme letter (a-z) ダイアログページのテーマカラーを定義します。
data-title sometext ダイアログページのタイトルを定義します。

Enhancement

data-enhance="false"またはdata-ajax="false"を持つコンテナ。

Data 属性 値 説明
data-enhance true | false 設定が"true"（デフォルト）の場合、jQuery Mobileは自動的にページにスタイルを追加し、モバイルデバイスに適したページにします。設定が"false"の場合、フレームワークはページのスタイルを設定しません。
data-ajax true | false ページの読み込みにAJAXを使用するかどうかを定義します。

注記：data-enhance="false"（例：$.mobile.ignoreContentEnabled=true"）を使用して、jQuery Mobileが自動的にページスタイルを追加するのを防ぎます。

$.mobile.ignoreContentEnabledがtrueに設定されている場合、data-ajax="false"を持つコンテナ内のリンクやフォーム要素は、フレームワークのナビゲーション機能により無視されます。

Fieldcontainer

label/form要素のdata-role="fieldcontain"を持つコンテナを包装します。

Fixed Toolbar

data-role="header"またはdata-role="footer"属性とdata-position="fixed"属性を持つコンテナ。

Data 属性 値 説明
data-disable-page-zoom true | false ユーザーがページを拡大縮小できるかどうかを定義します。
data-fullscreen true | false ツールバーが常に上部および/または下部に配置されるかどうかを定義します。
data-tap-toggle true | false ユーザーがタップ/クリックでツールバーの可視性を切り替えられるかどうかを定義します。
data-transition slide | fade | none タップ/クリック時のトランジション効果を定義します。
data-update-page-padding true | false resize、transitionおよび"updatelayout"イベントが発生した際にページの上下内余白を更新します（jQuery Mobileは常に"pageshow"イベント発生時に内余白を更新します）
data-visible-on-page-show true | false 親ページのツールバーの可視性を定義します。

フリップトーゲルスイッチ

data-role="slider"属性を持つ<select>要素と、2つの<option>要素。

Data 属性 値 説明
data-mini true | false スイッチが小さいサイズのものか、通常のサイズのものかを指定します。
data-role none jQuery Mobileがスイッチをボタnstylに設定しないようにします。
data-theme letter (a-z) スイッチのテーマカラーを指定します。
data-track-theme letter (a-z) トラッキングのテーマカラーを指定します。

フッター

data-role="footer"属性を持つコンテナ。

Data 属性 値 説明
data-id sometext ユニークなIDを指定します。パーシステントフッターには必須です。
data-position inline | fixed フッターとページ内容が行内関係であるか、または底部に固定されるかを指定します。
data-fullscreen true | false ページが常に底部に位置し、ページ内容を覆うかどうかを指定します（やや透けて見えます）。
data-theme letter (a-z) フッターのテーマカラーを指定します。デフォルトは"a"です。

注記：フルスクリーン位置を有効にする場合は、data-position="fixed"を使用し、その要素にdata-fullscreen属性を追加します。

ヘッダー

data-role="header"のコンテナ。

Data 属性 値 説明
data-id sometext ユニークなIDを指定します。パーシステントヘッダーには必須です。
data-position inline | fixed ヘッダーとページ内容が行内関係であるか、または顶部に固定されるかを指定します。
data-fullscreen true | false ページが常に顶部に位置し、ページ内容を覆うかどうかを指定します（やや透けて見えます）。
data-theme letter (a-z) ヘッダーのテーマカラーを指定します。デフォルトは"a"です。

注記：フルスクリーン位置を有効にする場合は、data-position="fixed"を使用し、その要素にdata-fullscreen属性を追加します。

リンク

すべてのリンク、data-role="button"のリンクやフォームの送信ボタンを含みます。

Data 属性 値 説明
data-ajax true | false ページをAJAXでロードするかどうかを指定します。ユーザーエクスペリエンスとトランジションを改善します。falseに設定された場合、jQuery Mobileは通常のページリクエストを行います。
data-direction reverse トランジションアニメーションを逆転します（ページやダイアログのみに適用）。
data-dom-cache true | false 個別のページの jQuery DOM キャッシュをクリアするかどうかを規定します（true に設定された場合、DOM の管理に注意し、すべてのモバイルデバイスで完全にテストしてください）。
data-prefetch true | false ページをDOMに事前にプルフエッチするかどうかを指定します。ユーザーがアクセスした際に利用可能にします。
data-rel back | dialog | external | popup リンクの動作に関するオプションを指定します。 バック - 履歴記録を一歩戻します。 ダイアログ - ページをダイアログとして開き、履歴に記録しません。 外部 - 他のドメインにリンクします。 オープン - ポップアップウィンドウを開きます。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 一ページから次のページへの遷移方法を規定します。jQuery Mobile 遷移を参照してください。
data-position-to origin | jQuery selector | window ポップアップボックスの位置を規定します。 オリジン - デフォルト。リンクを開く際にポップアップで表示されます。 jQuery selector - 指定された要素上に弹出します。 ウィンドウ - ウィンドウスクリーンの中央に弹出します。

List

data-role="listview" 属性を持つ <ol> または <ul> です。

Data 属性 値 説明
data-autodividers true | false リストアイテムを自動的に区切るかどうかを定義します。
data-count-theme letter (a-z) カウントボブルのテーマカラーを定義します。デフォルトは "c" です。
data-divider-theme letter (a-z) リスト区切り線のテーマカラーを定義します。デフォルトは "b" です。
data-filter true | false リストに検索ボックスを追加するかどうかを定義します。
data-filter-placeholder sometext 検索ボックスのテキストを定義します。デフォルトは "Filter items..." です。
data-filter-theme letter (a-z) 検索フィルタのテーマカラーを定義します。デフォルトは "c" です。
data-icon アイコンリファレンス リストのアイコンを定義します。
data-inset true | false リストに角丸と余白スタイルを追加するかどうかを定義します。
data-split-icon アイコンリファレンス 分割ボタンのアイコンを定義します。デフォルトは "arrow-r" です。
data-split-theme letter (a-z) 分割ボタンのテーマカラーを定義します。デフォルトは "b" です。
data-theme letter (a-z) リストのテーマカラーを定義します。

List item

data-role="listview" 属性を持つ <ol> または <ul> 内の <li> です。

Data 属性 値 説明
data-filtertext sometext フィルタリング要素で検索するテキストを定義します。このテキストが実際のリストアイテムのテキストではなく検索されます。
data-icon アイコンリファレンス リストアイテムのアイコンを定義します。
data-role list-divider リストアイテムの区切り線を定義します。
data-theme letter (a-z) リストアイテムのテーマカラーを定義します。

注記：data-icon 属性はリンクを含むリストアイテムにのみ適用されます。

Navbar

data-role="navbar" 属性を持つコンテナ内の <li> 要素です。

Data 属性 値 説明
data-icon アイコンリファレンス リストアイテムのアイコンを定義します。
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。

ヒント：ナビゲーションバーは親コンテナから theme-swatch を継承します。ナビゲーションバーに data-theme 属性を設定することはできません。ナビゲーションバー内の各リンクに data-theme 属性を個別に設定できます。

Page

data-role="page" 属性を持つコンテナです。

Data 属性 値 説明
data-add-back-btn true | false 自動的に戻るボタンを追加します。ページヘッダーにのみ適用されます。
data-back-btn-text sometext 戻るボタンのテキストを定義します。
data-back-btn-theme letter (a-z) 戻るボタンのテーマカラーを定義します。
data-close-btn-text letter (a-z) 対話の閉じるボタンのテキストを定義します。
data-dom-cache true | false 個別のページの jQuery DOM キャッシュをクリアするかどうかを規定します（true に設定された場合、DOM の管理に注意し、すべてのモバイルデバイスで完全にテストしてください）。
data-overlay-theme letter (a-z) 対話ページの上層（背景）色を規定します。
data-theme letter (a-z) ページのテーマカラーを規定します。デフォルトは「c」です。
data-title sometext ページのタイトルを規定します。
data-url url この値は URL を更新するために使用され、ページのリクエストには使用されません。

Popup

data-role="popup" 属性を持つコンテナ。

Data 属性 値 説明
data-corners true | false ポップアップボックスに角が丸かどうかを規定します。
data-overlay-theme letter (a-z) ポップアップボックスの上層（背景）色を規定します。デフォルトは透明背景（none）です。
data-shadow true | false ポップアップボックスに影があるかどうかを規定します。
data-theme letter (a-z) ポップアップボックスのテーマカラーを規定します。デフォルトは継承で、「none」は透明に設定されます。
data-tolerance 30, 15, 30, 15 ウィンドウの端（top, right, bottom, left）からの距離を規定します。

data-rel="popup" 属性を持つアンカー：

Data 属性 値 説明
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 一ページから次のページへの遷移方法を規定します。jQuery Mobile 遷移を参照してください。

Radio Button

label と type="radio" の input は、自動的にボタンスタイルに設定され、data-role は必要ありません。

Data 属性 値 説明
data-mini true | false ボタンのサイズが小さいか通常のサイズかを規定します。
data-role none jQuery Mobile を使用してラジオボタンを強化されたボタンスタイルに設定します。
data-theme letter (a-z) ラジオボタンのテーマカラーを規定します。

ヒント：複数のラジオボタンを組み合わせる場合、水平または垂直にボタンを組み合わせることを規定するために data-role="controlgroup" および data-type="horizontal|vertical" を使用してください。

Select

すべての <select> 元素。自動的にボタンスタイルが設定され、data-role は必要ありません。

Data 属性 値 説明
data-icon アイコンリファレンス select 元素のアイコンを指定します。デフォルトは "arrow-d" です。
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-inline true | false select 元素が行内かどうかを指定します。
data-mini true | false select 元素が小さいサイズか通常のサイズかを指定します。
data-native-menu true | false false に設定された場合、jQuery 自身のカスタム選択メニューを使用します（選択メニューがすべてのモバイルデバイスで一貫した外観を持つことを望む場合、推奨）。
data-overlay-theme letter (a-z) jQuery がカスタム選択メニューのテーマカラーを指定します（data-native-menu="false" と一緒に使用）。
data-placeholder true | false 非原生の <option> 元素に設定できます。
data-role none jQuery Mobile を使用して select 元素をボタンスタイルに設定します。
data-theme letter (a-z) select 元素のテーマカラーを指定します。

ヒント：複数の select 元素を組み合わせる場合は、data-role="controlgroup" と data-type="horizontal|vertical" を使用して、要素を水平か垂直に組み合わせます。

Slider

type="range" の input 元素。自動的にボタンスタイルが設定され、data-role は必要ありません。

Data 属性 値 説明
data-highlight true | false スライダートレイルをハイライト表示するかどうかを指定します。
data-mini true | false スライダーが小さいサイズか通常のサイズかを指定します。
data-role none jQuery Mobile を使用してスライダーの設定ボタンのスタイルを配置します。
data-theme letter (a-z) スライダーコントロール（input、handle、track）のテーマカラーを指定します。
data-track-theme letter (a-z) スライダートレイルのテーマカラーを指定します。

Text input と Textarea

type="text|search|etc." の input 元素または textarea 元素。自動的にスタイルが設定され、data-role は必要ありません。

Data 属性 値 説明
data-mini true | false input 要素が小さいか通常のサイズかを指定します。
data-role none jQuery Mobile を置くと input/textarea をボタンスタイルに設定します。
data-theme letter (a-z) 入力フィールドのトピックカラーを指定します。