jQuery モバイルデータプロパティ

jQueryデータプロパティ

jQuery Mobile は、HTML5 data-* 属性を使用して、モバイルデバイス向けに、よりタッチフレンドリーで魅力的な外観を作成します。

以下の参考リストにおいて、太字で示されている値はデフォルト値です。

ボタン

バージョン 1.4 以降は非推奨になりました。代わりに CSS クラスを使用してください。 data-role="button" を使用したハイパーリンク。ボタン要素、ツールバーのリンク、および入力フィールドは、data-role="button" を追加しなくても、自動的にボタンスタイルにレンダリングされます。

データプロパティ	価値	説明する
データコーナー	本当 \|	ボタンの角が丸いかどうかを指定します
データアイコン	アイコンリファレンスマニュアル	ボタンのアイコンを指定します。デフォルトではアイコンはありません。
データアイコン	左 \|	アイコンの位置を指定します
データアイコンシャドウ	本当 \|	ボタンアイコンに影を付けるかどうかを指定します
データインライン	真偽	ボタンがインラインかどうかを指定します
データミニ	真偽	ボタンが小さいか通常のサイズかを指定します
データシャドウ	本当 \|	ボタンに影があるかどうかを指定します
データテーマ	文字 (a-z)	ボタンのテーマカラーを指定します

	複数のボタンを結合するには、data-role="controlgroup" 属性と data-type="horizontal\|vertical" を持つコンテナを使用して、ボタンを水平または垂直に結合するかどうかを指定します。

チェックボックス

ラベルと入力を type="checkbox" でペアリングします。これらはボタンスタイルを使用して自動的にレンダリングされ、data-role は必要ありません。

データのプロパティ	価値	説明する
データミニ	真偽	チェックボックスが小さいか通常のサイズかを指定します
データロール	なし	jQuery Mobile がチェックボックスをボタンとしてレンダリングしないようにする
データテーマ	文字 (a-z)	チェックボックスのテーマカラーを指定します

	複数のチェックボックスをグループ化するには、data-role="controlgroup" 属性および data-type="horizontal\|vertical" を持つコンテナを使用して、チェックボックスを水平方向または垂直方向にグループ化するかどうかを指定します。

折りたたみ可能なブロック

data-role="collapsible" を含むコンテナ内の title 要素とそれに続く任意の HTML タグ。

データプロパティ	価値	説明する
データ崩壊	本当 \|	コンテンツを折りたたむか展開するかを指定します
データ折りたたみアイコン	アイコンリファレンスマニュアル	折りたたみボタンのアイコンを指定します。デフォルトは「プラス」です
データコンテンツのテーマ	文字 (a-z)	折りたたみ可能なコンテンツのテーマの色を指定します。折りたたみ可能なコンテンツに丸い角を追加するかどうか
データ展開アイコン	アイコンリファレンスマニュアル	コンテンツが展開されたときの折りたたみボタンのアイコンを指定します。デフォルトは「マイナス」です
データアイコン	左下 \|	アイコンの位置を指定します
データ挿入	本当 \|	折りたたみ可能なボタンを丸い角と余白でレンダリングするかどうかを指定します
データミニ	真偽	折りたたみ可能なボタンが小さいか通常のサイズかを指定します
データテーマ	文字 (a-z)	折りたたみボタンのテーマカラーを指定します。

折りたたみ可能なコレクション

data-role="collapsible-set"を使用したコンテナ内の折りたたみ可能なコンテンツブロック。

データプロパティ	価値	説明する
データ折りたたみアイコン	アイコンリファレンスマニュアル	折りたたみボタンのアイコンを指定します。デフォルトは「プラス」です
データコンテンツのテーマ	文字 (a-z)	折りたたみボタンのテーマカラーを指定します。
データ展開アイコン	アイコンリファレンスマニュアル	コンテンツが展開されたときの折りたたみボタンのアイコンを指定します。デフォルトは「マイナス」です
データアイコン	左 \|	アイコンの位置を指定します
データ挿入	本当 \|	折りたたみ可能なブロックを丸い角とマージンでレンダリングするかどうかを指定します
データミニ	真偽	折りたたみ可能なボタンが小さいか通常のサイズかを指定します
データテーマ	文字 (a-z)	折りたたみ可能なコレクションのテーマカラーを指定します。

コンテンツ

バージョン 1.4 で廃止され、バージョン 1.5 以降はサポートされなくなりました。 data-role="content"でコンテナを使用します。

データのプロパティ価値説明するデータテーマコンテンツのテーマカラーを指定します。

対照群

data-role="controlgroup" を含む <div> または <fieldset> コンテナ。単一タイプの複数のボタンスタイル入力 (リンクベースのボタン、ラジオボタン、チェックボックス、選択要素) を結合します。フォームのチェックボックスとラジオボタンを組み合わせた場合、ラベルのスタイルを改善するために、<div> 内で <fieldset> コンテナを使用することをお勧めします。


	文字 (a-z)

データのプロパティ価値説明するデータミニ真コントロールグループが小さいか通常のサイズかを指定しますデータ・タイプ水平コントロールグループを水平に表示するか垂直に表示するかを指定します

ダイアログボックス

data-role="dialog" を含むコンテナー、または data-rel="dialog" を含むリンク。


	偽
	垂直

データプロパティ	価値	説明する
データ閉じるボタンのテキスト	テキスト	ダイアログボックスの閉じるボタンのテキストを指定します。
データダムキャッシュ	真偽	個々のページの jQuery DOM キャッシュをクリアするかどうかを指定します (true に設定した場合、DOM を自分で管理し、すべてのモバイルデバイスでテストする必要があります)
データオーバーレイテーマ	文字 (a-z)	ダイアログページのマスク（背景）色を指定します。
データテーマ	文字 (a-z)	ダイアログページのテーマカラーを指定します
データタイトル	テキスト	ダイアログページのタイトルを指定します

強化する

data-enhance="false" または data-ajax="false" が設定されたコンテナ。

データのプロパティ	価値	説明する
データ強化	本当 \|	「true」(デフォルト) に設定すると、jQuery Mobile はページをモバイルデバイスに適したものにするために自動的にレンダリングします。「false」に設定すると、フレームワークはページをレンダリングしません。
データ-ajax	本当 \|	ajax経由でページをロードするかどうかを指定します

注: jQuery Mobile がページを自動的にレンダリングしないようにするには、data-enhance="false" を $.mobile.ignoreContentEnabled=true" と一緒に使用する必要があります。

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

ドメインコンテナ

バージョン 1.4 以降は非推奨となり、バージョン 1.5 以降はサポートされなくなりました。代わりに class="ui-fieldcontain が使用されます"。 data-role="fieldcontain" を持つラベル/フォーム要素のペアでラップされたコンテナー。

固定ツールバー

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

データのプロパティ	価値	説明する
データ無効化ページズーム	本当 \|	ユーザーがページをズームできるかどうかを指定します
データフルスクリーン	真偽	ツールバーを常に上部または下部にドッキングするかどうかを指定します
データタップトグル	本当 \|	ユーザーがツールバーをクリックして表示/非表示を変更できるかどうかを指定します
データ移行	スライド \|	クリック時のトランジション効果を指定します
データ更新ページのパディング	本当 \|	サイズ変更、遷移、「updatelayout」イベントの発生時にページの上部と下部のパディングを更新するかどうかを指定します（jQuery Mobile は「pageshow」イベントの発生時に常にパディングを更新します）
ページ上で表示されるデータ表示	本当 \|	親ページが表示されているときのツールバーの表示/非表示を指定します。

フリップトグルスイッチ

data-role="slider" を含む 1 つの <select> 要素と 2 つの <option> 要素。

データのプロパティ	価値	説明する
データミニ	真偽	スイッチが小さいか通常のサイズかを指定します
データロール	なし	jQuery Mobile がトグルスイッチをボタンとしてレンダリングしないようにする
データテーマ	文字 (a-z)	トグルスイッチのテーマカラーを指定します
データトラックテーマ	文字 (a-z)	トラックのテーマカラーを指定します

テールバー

data-role="footer" を含むコンテナ。

データプロパティ	価値	説明する
データID	テキスト	一意のIDを指定します。永続的なテールバーに必須
データ位置	インラインを修正しました	フッターバーをページコンテンツとインラインで配置するか、下部に固定したままにするかを指定します
データフルスクリーン	真偽	フッターバーを下部に固定するか、ページコンテンツを覆うか（表示範囲を広げる）を指定します。
データテーマ	文字 (a-z)	フッターバーのテーマカラーを指定します。デフォルトは「a」です

注: 全画面配置を有効にするには、data-position="fixed" を使用してから要素に data-fullscreen 属性を追加してください。

ヘッダーバー

data-role="header"を含むコンテナ。

データのプロパティ	価値	説明する
データID	テキスト	一意のIDを指定します。永続的なヘッダーバーに必須
データ位置	インラインを修正しました	ヘッダーバーをページコンテンツとインラインで配置するか、上部に固定したままにするかを指定します
データフルスクリーン	真偽	ヘッダーバーを上部に固定するか、ページコンテンツを覆う (表示範囲を広げる) かを指定します。
データテーマ	文字 (a-z)	ヘッダーバーのテーマカラーを指定します。デフォルトは「a」です

注: 全画面配置を有効にするには、data-position="fixed" を使用してから要素に data-fullscreen 属性を追加してください。

リンク

data-role="button" およびフォーム送信ボタンを含むすべてのリンク。

データのプロパティ	価値	説明する
データ-ajax	本当 \|	ユーザーエクスペリエンスとインタラクションを向上させるために、ajax 経由でページをロードするかどうかを指定します。 false に設定すると、jQuery Mobile は通常のページリクエストを実行します。
データ方向	逆行する	逆遷移アニメーション (ページおよびダイアログボックスのみ)
データダムキャッシュ	真偽	個々のページの jQuery DOM キャッシュをクリアするかどうかを指定します (true に設定した場合、DOM を自分で管理し、すべてのモバイルデバイスでテストする必要があります)
データプリフェッチ	真偽	ユーザーがアクセスしたときにページを利用できるように、DOM にページをプリフェッチするかどうかを指定します。
データリリース	戻る \| 外部ダイアログ	リンクの動作を指定するオプション。戻る - 履歴の前のページに戻ります。ダイアログ - リンクを履歴に保存せずにダイアログボックスとして開きます。外部 - 別のドメインにリンクするために使用されます。ポップアップ - ポップアップウィンドウを開きます。
データ移行	フェード \| スライドダウンスライドアップ \| なし	あるページから次のページに切り替えるときの効果を指定します。jQuery モバイルページの切り替えの章をご覧ください。
データ位置先	オリジン \|	ポップアップボックスの位置を指定します。原点 - デフォルト。ポップアップを開いたリンク上にポップアップを配置します。 jQuery セレクター - 指定された要素にポップアップウィンドウを配置します。ウィンドウ - ポップアップをウィンドウ画面の中央に配置します。

データプロパティ	価値	説明する
データ自動分割器	真偽	リスト項目を自動的に分割するかどうかを指定します
データ数のテーマ	文字 (a-z)	バブルを数えるときのテーマの色を指定します。
データディバイダーのテーマ	文字 (a-z)	リスト区切り記号のテーマの色を指定します。
データフィルター	真偽	リストに検索ボックスを追加するかどうかを指定します
データフィルタープレースホルダー	テキスト	バージョン1.4以降は廃止されました。代わりに HTML プレースホルダー属性を使用してください。検索ボックスにテキストを指定します。デフォルトは「項目をフィルター...」です。
データフィルターのテーマ	文字 (a-z)	検索フィルタリングのテーマの色を指定します。
データアイコン	アイコンリファレンスマニュアル	リストアイコンを指定
データ挿入	真偽	リストを丸い角と余白でレンダリングするかどうかを指定します
データ分割アイコン	アイコンリファレンスマニュアル	分割ボタンのチャートを指定します。デフォルトは「arrow-r」です
データ分割テーマ	文字 (a-z)	分割ボタンのテーマカラーを指定します。
データテーマ	文字 (a-z)	リストのテーマカラーを指定します

リストアイテム

<ol> data-role="listview" または <li> を <ul> 内に追加します。

データプロパティ	価値	説明する
データフィルターテキスト	テキスト	要素をフィルタリングするときに検索するテキストを指定します。このテキストは、実際のリスト項目のテキストの代わりにフィルターされます。
データアイコン	アイコンリファレンスマニュアル	リスト項目アイコンの指定
データロール	リスト分割器	リスト項目の区切りを指定する
データテーマ	文字 (a-z)	リスト項目のテーマの色を指定します

注: data-icon 属性は、リンクのあるリスト項目でのみ機能します。

ナビゲーションバー

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

データプロパティ	価値	説明する
データアイコン	アイコンリファレンスマニュアル	リスト項目のアイコンを指定します
データアイコン	左 \| 右 \| 上アイコンの位置を指定します

ページ

data-role="page"を含むコンテナ。

ナビゲーションバーは、親コンテナからテーマのサンプルを継承します。ナビゲーションバーのデータテーマ属性を設定することはできません。データテーマ属性は、ナビゲーションバーのリンクごとに個別に設定できます。

データプロパティ	価値	説明する
データ追加バックボタン	真偽	戻るボタン、ヘッダーバーのみを自動的に追加
データバックボタンテキスト	テキスト	戻るボタンのテキストを指定します
データ戻るボタンのテーマ	文字 (a-z)	戻るボタンのテーマカラーを指定します
データ閉じるボタンのテキスト	文字 (a-z)	ダイアログボックスの閉じるボタンのテキストを指定します。
データダムキャッシュ	真偽	個々のページの jQuery DOM キャッシュをクリアするかどうかを指定します (true に設定した場合、DOM を自分で管理し、すべてのモバイルデバイスでテストする必要があります)
データオーバーレイテーマ	文字 (a-z)	ダイアログページのマスク（背景）色を指定します。
データテーマ	文字 (a-z)	ページのテーマカラーを指定します。
データタイトル	テキスト	ページタイトルを指定する
データ URL	URL	ページのリクエストに使用したURL以外のURLの値を更新します

ポップアップ

data-role="popup"を含むコンテナ。

データのプロパティ	価値	説明する
データコーナー	本当 \|	ポップアップウィンドウの角を丸くするかどうかを指定します
データオーバーレイテーマ	文字 (a-z)	ポップアップボックスのマスク（背景）色を指定します。デフォルトは背景が透明（なし）です。
データシャドウ	本当 \|	ポップアップボックスに影があるかどうかを指定します
データテーマ	文字 (a-z)	ポップアップボックスのテーマカラーを指定します。デフォルトが継承され、「なし」はポップアップウィンドウを透明に設定します。
データトレランス	30、15、30、15	ウィンドウの端（上、右、下、左）間の距離を指定します。

data-rel="popup"を使用したアンカー:

データのプロパティ	価値	説明する
データ位置先	オリジン \|	>ポップアップボックスの位置を指定します。原点 - デフォルト。ポップアップを開いたリンク上にポップアップを配置します。 jQuery セレクター - 指定された要素にポップアップウィンドウを配置します。ウィンドウ - ポップアップをウィンドウ画面の中央に配置します。
データリリース	ポップアップ	ポップアップボックスを開くために使用されます
データ移行	\| フェード \| フリップ \| スライドダウン \| なし	あるページから次のページに切り替えるときの効果を指定します。 jQuery モバイルページの切り替えの章をご覧ください。

単一のボタン

type="radio" を使用したラベルと入力のペア。これらはボタンスタイルを使用して自動的にレンダリングされ、data-role は必要ありません。

データプロパティ	価値	説明する
データミニ	真偽	ボタンが小さいか通常のサイズかを指定します
データロール	なし	要素がネイティブ HTML 状態で表示されるように、jQuery Mobile が拡張状態ボタンとしてスタイルされたラジオボタンをレンダリングしないようにします。
データテーマ	文字 (a-z)	ラジオボタンのテーマカラーを指定します。

	複数のラジオボタンをグループ化するには、data-role="controlgroup" 属性および data-type="horizontal\|vertical" を持つコンテナを使用して、ラジオボタンを水平または垂直のどちらにグループ化するかを指定します。

選ぶ

すべての <select> 要素。これらはボタンスタイルとして自動的にレンダリングされ、date-role は必要ありません。

データのプロパティ	価値	説明する
データアイコン	アイコンリファレンスマニュアル	選択要素のアイコンを指定します。デフォルトは「arrow-d」です
データアイコン	左 \| 右 \|	アイコンの位置を指定します
データインライン	真偽	選択要素がインラインであるかどうかを指定します
データミニ	真偽	選択要素が小さいか通常のサイズかを指定します
データネイティブメニュー	本当 \|	false に設定すると、jQuery に付属のカスタム選択メニューが使用されます (選択メニューをすべてのモバイルデバイスで同じように表示したい場合に推奨)
データオーバーレイテーマ	文字 (a-z)	jQuery に付属するカスタム選択メニューのテーマの色を指定します (data-native-menu="false" で使用)
データプレースホルダー	真偽	非ネイティブ選択メニューの <option> 要素に設定できます。
データロール	なし	jQuery Mobile が選択要素をボタンスタイルにレンダリングしないようにする
データテーマ	文字 (a-z)	選択要素のテーマカラーを指定します

	複数の select 要素を結合するには、data-role="controlgroup" 属性と data-type="horizontal\|vertical" を持つコンテナを使用して、select 要素を水平方向または垂直方向に結合するかどうかを指定します。

スライダー

type="range"の入力ボックス。これらはボタンスタイルとして自動的にレンダリングされ、date-role は必要ありません。

データのプロパティ	価値	説明する
データハイライト	真偽	スライドトラックを強調表示するかどうかを指定します
データミニ	真偽	スライダーが小さいか通常のサイズかを指定します
データロール	なし	jQuery Mobile がスライダーコントロールをボタンスタイルとしてレンダリングしないようにする
データテーマ	文字 (a-z)	スライダーコントロール (入力ボックス、ハンドル、トラック) のテーマの色を指定します。
データトラックテーマ	文字 (a-z)	スライダートラックのテーマカラーを指定します。

テキスト入力ボックスとテキスト入力フィールド

type="text|search|etc." を含む input または textarea 要素。これらはボタンスタイルとして自動的にレンダリングされ、date-role は必要ありません。

データプロパティ	価値	説明する
データミニ	真偽	入力ボックスが小さいか通常のサイズかを指定します
データロール	なし	jQuery Mobile が入力ボックス/フィールドをボタンスタイルにレンダリングしないようにする
データテーマ	文字 (a-z)	入力フィールドのテーマカラーを指定します

jQuery モバイル データ プロパティ