フォーラム | 最新のWeb開発のチュートリアル
 

jQuery Mobileデータ属性


jQueryのデータ属性

jQueryのモバイルは、使用してHTML5にdata-*属性を作成するには"touch-friendly"モバイルデバイスのための、魅力的な外観を。

以下の参照リストについては、 bold valueデフォルト値を指定します。


ボタン

バージョン1.4で推奨されていません。 使用するCSSクラス代わりに。ハイパーリンクをdata-role="button" 。 ツールバーと入力フィールド内の要素とのリンクが自動的にボタンとしてスタイル設定されているボタン、の必要がないdata-role="button"

データ属性 説明
data-corners true | false ボタンは丸い角を持っているかいないかどうかを指定します
data-icon Icons Reference ボタンのアイコンを指定します。 デフォルトでは、アイコンではありません
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-iconshadow true | false ボタンのアイコンが影を持っているかいないかどうかを指定します
data-inlinetrue | false ボタンはインラインすべきか否かを指定します
data-minitrue | false ボタンが小さいか、通常のサイズのものかどうかを指定します
data-shadow true | false ボタンは影を持っているかいないかどうかを指定します
data-theme letter (a-z) ボタンのテーマカラーを指定します。

グループの複数のボタンに、とコンテナを使用しdata-role="controlgroup"と一緒に属性data-type="horizontal|vertical"水平または垂直グループボタンにするかどうかを指定します。


チェックボックス

ラベルと入力のペアtype="checkbox"

データ属性 説明
data-minitrue | false チェックボックスが小さいか、通常のサイズのものかどうかを指定します
data-rolenone jQueryのモバイルは、ボタンなどのスタイルのチェックボックスに防ぎます
data-theme letter (a-z) チェックボックスのテーマの色を指定します

グループ複数のチェックボックスに、使用するdata-role="controlgroup"と一緒にdata-type="horizontal|vertical"水平または垂直グループのチェックボックスにするかどうかを指定します。


折り畳み式の

容器内の任意のHTMLマークアップに続いて、ヘッダ要素data-role="collapsible"

データ属性 説明
data-collapsed true | false コンテンツがクローズまたは拡大すべきかどうかを指定します
data-collapsed-cue-text sometext  スクリーンリーダーソフトウェアを使用してユーザのための可聴フィードバックを提供するために、いくつかのテキストを指定します。 デフォルトは「内容を折りたたむにします」です。
data-collapsed-icon Icons Reference 折りたたみ可能なボタンのアイコンを指定します。 デフォルトは「プラス」
data-content-theme letter (a-z) 折りたたみ可能なコンテンツのテーマカラーを指定します。 また、折りたたみ可能なコンテンツに丸みを帯びたコーナーを追加します
data-expanded-cue-text sometext  スクリーンリーダーソフトウェアを使用してユーザのための可聴フィードバックを提供するために、いくつかのテキストを指定します。 デフォルトは「内容をクリックして展開します」です。
data-expanded-icon Icons Reference コンテンツが展開されたときに折り畳み式のボタンのアイコンを指定します。 デフォルトは"minus"
data-iconpos left | right | top | bottom アイコンの位置を指定します。
data-inset true | false 折りたたみ可能なボタンが丸みを帯びたコーナーといくつかの余裕かないでスタイリングするかどうかを指定します
data-minitrue | false 折り畳み式のボタンが小さいか、通常のサイズのものかどうかを指定します
data-theme letter (a-z) 折りたたみ可能なボタンのテーマカラーを指定します。

折りたたみセット

容器内部の折りたたみコンテンツブロックdata-role="collapsibleset"

データ属性 説明
data-collapsed-icon Icons Reference 折りたたみ可能なボタンのアイコンを指定します。 デフォルトは「プラス」
data-content-theme letter (a-z) 折りたたみ可能なコンテンツのテーマカラーを指定します。
data-expanded-icon Icons Reference コンテンツが展開されたときに折り畳み式のボタンのアイコンを指定します。 デフォルトは「マイナス」であります
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-inset true | false collapsiblesが丸みを帯びたコーナーといくつかの余裕かないでスタイリングするかどうかを指定します
data-minitrue | false 折り畳み式のボタンが小さいか、通常のサイズのものかどうかを指定します
data-theme letter (a-z) 折り畳み式セットのテーマカラーを指定します

コンテンツ

バージョン1.4で非推奨、および1.5で削除されます。とコンテナdata-role="content"

データ属性 説明
data-theme letter (a-z) コンテンツのテーマカラーを指定します。

対照群

<div><fieldset>とコンテナdata-role="controlgroup" シングルタイプのグループの複数のボタンスタイルの入力(リンクベースボタン、ラジオボタン、チェックボックス、選択の要素)。 フォームのチェックボックスとラジオボタンをグループ化するために、 <fieldset>容器が内部に推奨され<div>"ui-fieldcontain"ラベルのスタイリングを向上させるために、クラス。

データ属性 説明
data-exclude-invisible true | false 丸みを帯びた角の割り当てに目に見えない子供たちを除外するかどうかを指定します
data-minitrue | false グループが小さいか、通常のサイズのものかどうかを指定します
data-theme letter (a-z) controlgroupのテーマカラーを指定します。
data-typehorizontal | vertical グループは、水平または垂直に表示するかどうかを指定

ダイアログ

コンテナdata-dialog="true"

データ属性 説明
data-close-btn left | right | none 閉じるボタンの位置を指定します
data-close-btn-text sometext 閉じるボタンのテキストを指定します
data-corners true | false  ダイアログが丸みを帯びた角を持っているかいないかどうかを指定します
data-dom-cachetrue | false 個々のページのためのjQueryのDOMキャッシュかどうかをクリアするかどうかを指定します(trueに設定されている場合、あなたはDOMを自分で管理し、すべてのモバイルデバイスで徹底的にテストするために世話をする必要があります)
data-overlay-theme letter (a-z) ダイアログ・ページのオーバーレイ(背景)の色を指定します。
data-theme letter (a-z) ダイアログ・ページのテーマカラーを指定します
data-title sometext ダイアログ・ページのタイトルを指定します。

強化

コンテナdata-enhance="false"data-ajax="false"

データ属性 説明
data-enhance true | false 設定した場合は"true" 、(デフォルト)のjQuery Mobileは、自動的にモバイルデバイスに適して、ページのスタイルを設定します。 「偽」に設定すると、フレームワークは、ページのスタイルを設定しません
data-ajax true | false AJAX経由か、ページをロードするかどうかを指定します

注: data-enhance="false"と組み合わせて使用する必要があり$.mobile.ignoreContentEnabled=true"自動的にスタイルのページへのjQuery Mobileを停止します。

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


フィールドコンテナ

バージョン1.4で非推奨、および1.5で削除されます。 使用class="ui-fieldcontain instead"とコンテナdata-role="fieldcontain"ラベル/フォーム要素のペアに巻き付けを。


固定ツールバー

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

データ属性 説明
data-disable-page-zoom true | false ユーザーが/ズームページを拡大縮小することが可能であるかどうかを指定
data-fullscreentrue | false 常にトップおよび/または底部に配置するツールバーを指定します。
data-tap-toggle true | false ユーザーがタップ/クリックかにツールバー-表示を切り替えることが可能であるかどうかを指定します
data-transition slide | fade | none タップ/クリックが発生したときにトランジション効果を指定します
data-update-page-padding true | false ページの上部と下部の両方のパディングがサイズ変更、トランジションおよびに更新されるように指定し"updatelayout"イベント(jQueryのモバイルは常に上パディングを更新"pageshow"イベント)
data-visible-on-page-show true | false 親ページが表示されたとき、ツールバー、可視性を指定します。

フリップトグルスイッチ

<input type="checkbox">のデータ・役割と"flipswitch"

データ属性 説明
data-minitrue | false スイッチが小さいか、通常のサイズのものかどうかを指定します
data-on-text sometext 指定フリップスイッチ上のテキスト「オン」(デフォルトは"On"
data-off-text sometext (デフォルトはフリップスイッチの「オフ」のテキストを指定し"Off"

フッター

コンテナdata-role="footer"

データ属性 説明
data-id sometext 一意のIDを指定します。 永続的なフッターのために必要
data-position inline | fixed フッターは、ページのコンテンツとインラインでなければならないか、底部に配置されたままかどうかを指定します
data-fullscreentrue | false フッターは常に一番下に、ページコンテンツの上に配置する必要があるかどうかを指定します(少しシースルー)しませんか
data-theme letter (a-z) フッターのテーマカラーを指定します。

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


ヘッダ

コンテナdata-role="header"

データ属性 説明
data-id sometext 一意のIDを指定します。 永続的なヘッダーのために必要
data-position inline | fixed ヘッダはページのコンテンツとインラインでなければならないか、上部に配置されたままかどうかを指定します
data-fullscreentrue | false ヘッダは常に一番上にし、ページコンテンツの上に配置する必要があるかどうかを指定します(少しシースルー)しませんか
data-theme letter (a-z) ヘッダーのテーマカラーを指定します。

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


入力

入力type="text|search|etc."またはtextarea elements

データ属性 説明
data-clear-btntrue | false 入力が持っているかどうかを指定し"clear"ボタンを
data-clear-btn-text text 「クリア」ボタンのテキストを指定します。 デフォルトは"clear text"
data-minitrue | false 入力が小さいか、レギュラーサイズのものでなければならないかどうかを指定します
data-rolenone jQueryのモバイルは、ボタンなどのスタイルの入力/テキストエリアに防ぎます
data-theme letter (a-z)  入力フィールドのテーマカラーを指定します。

リンク

すべてのリンク。

データ属性 説明
data-ajax true | false 改良されたユーザーエクスペリエンスやトランジションのためのAjaxを介して、ページをロードするかどうかを指定します。 falseに設定すると、jQueryのモバイルは、通常のページ要求を行います。
data-directionreverse (のみのページまたはダイアログの)逆トランジションアニメーション
data-dom-cachetrue | false 個々のページのためのjQueryのDOMキャッシュかどうかをクリアするかどうかを指定します(trueに設定されている場合、あなたはDOMを自分で管理し、すべてのモバイルデバイスで徹底的にテストするために世話をする必要があります)
data-prefetchtrue | false 彼らが利用可能であるように、ユーザーがそれらを訪れたときにDOMにページをプリフェッチするかどうかを指定します
data-relback | dialog | external | popup リンクがどのように振る舞うべきかのオプションを指定します。 戻る - 一歩戻って歴史の中で移動します。 ダイアログ - 歴史の中で追跡されていないダイアログとリンクを開きます。 外部 - 別のドメインにリンクしてください。 ポップアップ - ポップアップウィンドウを開きます。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 次のページへ移行する方法を指定します。 私たちを参照してくださいjQueryのモバイルトランジション章を。
data-position-to origin | jQuery selector | window ポップアップボックスの位置を指定します。 起源 - デフォルト。 それを開くリンクの上で、ポップアップを配置します。 jQueryのセレクタ - 指定された要素の上で、ポップアップを配置します。 ウィンドウ - ウィンドウ画面の中央に位置ポップアップを。

リスト

<ol>または<ul>data-role="listview"

データ属性 説明
data-autodividerstrue | false 自動的にリスト項目を分割するかどうかを指定します
data-count-theme letter (a-z) カウントバブルのテーマカラーを指定します。
data-divider-theme letter (a-z) リストデバイダのテーマカラーを指定します。
data-filtertrue | false リストにかどうか、検索ボックスを追加するかどうかを指定
data-filter-placeholder sometext バージョン1.4で推奨されていません。 代わりにHTMLプレースホルダー属性を使用します。検索ボックス内のテキストを指定します。 デフォルトは「フィルタ項目... "であります
data-filter-theme letter (a-z) 検索フィルタのテーマカラーを指定します。
data-icon Icons Reference リストのアイコンを指定します
data-insettrue | false リストには、丸みを帯びたコーナーといくつかの余裕かないでスタイリングするかどうかを指定します
data-split-icon Icons Reference 分割ボタンのアイコンを指定します。 デフォルトは「矢印-R "であります
data-split-theme letter (a-z) 分割ボタンのテーマカラーを指定します。
data-theme letter (a-z) リストのテーマカラーを指定します。

並び項目

<li>内部の<ol>または<ul>data-role="listview"

データ属性 説明
data-filtertext sometext フィルタリング要素を検索するテキストを指定します。 このテキストは、代わりに、実際のリスト項目のテキストのフィルタリングされます
data-icon Icons Reference リストアイテムのアイコンを指定します。
data-rolelist-divider リストアイテムの分周器を指定します
data-theme letter (a-z)  リスト項目のテーマカラーを指定します。

注意:データのアイコンはリンク付きリスト項目にのみ作業を属性。


ナビゲーションバー

<li>とコンテナ内の要素data-role="navbar"

データ属性 説明
data-icon Icons Reference リストアイテムのアイコンを指定します。
data-iconposleft | right | top | bottom | notext アイコンの位置を指定します。

Navbarsは、親コンテナからテーマスウォッチを継承します。 ナビゲーションバーにデータをテーマに属性を設定することはできません。 データ・テーマ属性は、ナビゲーションバー内の各リンクに個別に設定することができます。


ページ

コンテナdata-role="page"

データ属性 説明
data-dom-cachetrue | false 個々のページのためのjQueryのDOMキャッシュかどうかをクリアするかどうかを指定します(trueに設定されている場合、あなたはDOMを自分で管理し、すべてのモバイルデバイスで徹底的にテストするために世話をする必要があります)
data-overlay-theme letter (a-z)  ダイアログ・ページのオーバーレイ(背景)の色を指定します。
data-theme letter (a-z)  ページのテーマカラーを指定します
data-title sometext ページタイトルを指定します。
data-urlurl URLを更新するため、代わりにページを要求するために使用されるURLの値

現れる

コンテナdata-role="popup"

データ属性 説明
data-corners true | false ポップアップが丸みを帯びた角を持っているかいないかどうかを指定します
data-dismissible true | false ポップアップがポップアップの外側をクリックするか、しないことによって閉じられるかどうかを指定します
data-history true | false 開いたときにポップアップがブラウザの履歴項目を作成するかどうかを指定します。 falseに設定されている場合、それは、履歴項目を作成しませんし、次にブラウザの「戻る」ボタンで閉鎖可能ではありません
data-overlay-theme letter (a-z)  ポップアップボックスのオーバーレイ(背景)の色を指定します。 デフォルトでは、透明な背景(なし)です。
data-shadow true | false ポップアップボックスが影を持っているかいないかどうかを指定します
data-theme letter (a-z)  ポップアップボックスのテーマの色を指定します。 デフォルトでは、継承された、 "none"透明にポップアップを設定していません
data-tolerance30, 15, 30, 15 ウィンドウの端からの距離を指定します( top, right, bottom, left

アンカーdata-rel="popup"

データ属性 説明
data-position-to origin | jQuery selector | window ポップアップボックスの位置を指定します。 起源 - デフォルト。 それを開くリンクの上で、ポップアップを配置します。 jQueryのセレクタ - 指定された要素の上で、ポップアップを配置します。 ウィンドウ - ウィンドウ画面の中央に位置ポップアップを。
data-relpopup ポップアップボックスを開きます
data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 次のページへ移行する方法を指定します。 私たちを参照してくださいjQueryのモバイルトランジション章を。

ラジオボタン

ラベルと入力のペアtype="radio"

データ属性 説明
data-minitrue | false ボタンが小さいか、通常のサイズのものかどうかを指定します
data-rolenone jQueryのモバイルは、スタイルに防ぎradiobuttons強化ボタンとして
data-theme letter (a-z) ラジオボタンのテーマカラーを指定します。

グループの複数のラジオボタンに、使用するdata-role="controlgroup"と一緒にdata-type="horizontal|vertical"かどうかのグループに水平または垂直のボタンを指定します。


選択します

すべて<select>要素を。

データ属性 説明
data-icon Icons Reference select要素のアイコンを指定します。 デフォルトは"arrow-d"
data-iconposleft | right | top | bottom | notext アイコンの位置を指定します。
data-inlinetrue | false select要素は、インラインすべきか否かを指定します
data-minitrue | false 選択が小さいか、通常のサイズのものかどうかを指定します
data-native-menu true | false falseに設定すると、それは(あなたが選択メニューがすべてのモバイルデバイスで同じように表示したい場合に推奨)jQueryの独自のカスタム選択メニューを使用しています
data-overlay-theme letter (a-z) jQueryの独自のカスタム選択メニューのテーマカラーを指定します(と一緒に使用されるdata-native-menu="false"
data-placeholdertrue | false 設定することができます<option>非ネイティブ選択の要素
data-rolenone jQueryのモバイルは、ボタンなどのスタイルを選択要素に防ぎます
data-theme letter (a-z) select要素のテーマカラーを指定します。

グループの倍数に要素を選択し、使用するdata-role="controlgroup"一緒にdata-type="horizontal|vertical"かどうかのグループに水平または垂直要素を指定します。


スライダー

入力type="range"

データ属性 説明
data-highlighttrue | false スライダートラックが強調表示するかどうかを指定します
data-minitrue | false スライダーが小さいか、通常のサイズのものかどうかを指定します
data-rolenone jQueryのモバイルは、ボタンなどのスタイルのスライダコントロールを防ぎます
data-theme letter (a-z) (入力、処理し、追跡)スライダコントロールのテーマカラーを指定します。
data-track-theme letter (a-z) スライダートラックのテーマカラーを指定します。