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-inline | true | false | ボタンはインラインすべきか否かを指定します |
| data-mini | true | false | ボタンが小さいか、通常のサイズのものかどうかを指定します |
| data-shadow | true | false | ボタンは影を持っているかいないかどうかを指定します |
| data-theme | letter (a-z) | ボタンのテーマカラーを指定します。 |
グループの複数のボタンに、とコンテナを使用しdata-role="controlgroup"と一緒に属性data-type="horizontal|vertical"水平または垂直グループボタンにするかどうかを指定します。
チェックボックス
ラベルと入力のペアtype="checkbox" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-mini | true | false | チェックボックスが小さいか、通常のサイズのものかどうかを指定します |
| data-role | none | 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-mini | true | 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-mini | true | 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-mini | true | false | グループが小さいか、通常のサイズのものかどうかを指定します |
| data-theme | letter (a-z) | controlgroupのテーマカラーを指定します。 |
| data-type | horizontal | vertical | グループは、水平または垂直に表示するかどうかを指定 |
ダイアログ
コンテナdata-dialog="true" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-close-btn | left | right | none | 閉じるボタンの位置を指定します |
| data-close-btn-text | sometext | 閉じるボタンのテキストを指定します |
| data-corners | true | false | ダイアログが丸みを帯びた角を持っているかいないかどうかを指定します |
| data-dom-cache | true | 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-fullscreen | true | 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-mini | true | false | スイッチが小さいか、通常のサイズのものかどうかを指定します |
| data-on-text | sometext | 指定フリップスイッチ上のテキスト「オン」（デフォルトは"On" ） |
| data-off-text | sometext | （デフォルトはフリップスイッチの「オフ」のテキストを指定し"Off" ） |
フッター
コンテナdata-role="footer" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-id | sometext | 一意のIDを指定します。 永続的なフッターのために必要 |
| data-position | inline | fixed | フッターは、ページのコンテンツとインラインでなければならないか、底部に配置されたままかどうかを指定します |
| data-fullscreen | true | false | フッターは常に一番下に、ページコンテンツの上に配置する必要があるかどうかを指定します（少しシースルー）しませんか |
| data-theme | letter (a-z) | フッターのテーマカラーを指定します。 |
、フルスクリーンの位置を有効にするには、使用：注 data-position="fixed"した後、追加data-fullscreen要素に属性を。
ヘッダ
コンテナdata-role="header" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-id | sometext | 一意のIDを指定します。 永続的なヘッダーのために必要 |
| data-position | inline | fixed | ヘッダはページのコンテンツとインラインでなければならないか、上部に配置されたままかどうかを指定します |
| data-fullscreen | true | false | ヘッダは常に一番上にし、ページコンテンツの上に配置する必要があるかどうかを指定します（少しシースルー）しませんか |
| data-theme | letter (a-z) | ヘッダーのテーマカラーを指定します。 |
、フルスクリーンの位置を有効にするには、使用：注 data-position="fixed"した後、追加data-fullscreen要素に属性を。
入力
入力type="text|search|etc."またはtextarea elements 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-clear-btn | true | false | 入力が持っているかどうかを指定し"clear"ボタンを |
| data-clear-btn-text | text | 「クリア」ボタンのテキストを指定します。 デフォルトは"clear text" |
| data-mini | true | false | 入力が小さいか、レギュラーサイズのものでなければならないかどうかを指定します |
| data-role | none | jQueryのモバイルは、ボタンなどのスタイルの入力/テキストエリアに防ぎます |
| data-theme | letter (a-z) | 入力フィールドのテーマカラーを指定します。 |
リンク
すべてのリンク。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-ajax | true | false | 改良されたユーザーエクスペリエンスやトランジションのためのAjaxを介して、ページをロードするかどうかを指定します。 falseに設定すると、jQueryのモバイルは、通常のページ要求を行います。 |
| 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のモバイルトランジション章を。 |
| data-position-to | origin | jQuery selector | window | ポップアップボックスの位置を指定します。 起源 - デフォルト。 それを開くリンクの上で、ポップアップを配置します。 jQueryのセレクタ - 指定された要素の上で、ポップアップを配置します。 ウィンドウ - ウィンドウ画面の中央に位置ポップアップを。 |
リスト
<ol>または<ul>とdata-role="listview" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-autodividers | true | false | 自動的にリスト項目を分割するかどうかを指定します |
| data-count-theme | letter (a-z) | カウントバブルのテーマカラーを指定します。 |
| data-divider-theme | letter (a-z) | リストデバイダのテーマカラーを指定します。 |
| data-filter | true | false | リストにかどうか、検索ボックスを追加するかどうかを指定 |
| data-filter-placeholder | sometext | バージョン1.4で推奨されていません。 代わりにHTMLプレースホルダー属性を使用します。検索ボックス内のテキストを指定します。 デフォルトは「フィルタ項目... "であります |
| data-filter-theme | letter (a-z) | 検索フィルタのテーマカラーを指定します。 |
| data-icon | Icons Reference | リストのアイコンを指定します |
| data-inset | true | 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-role | list-divider | リストアイテムの分周器を指定します |
| data-theme | letter (a-z) | リスト項目のテーマカラーを指定します。 |
注意：データのアイコンはリンク付きリスト項目にのみ作業を属性。
ナビゲーションバー
<li>とコンテナ内の要素data-role="navbar" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-icon | Icons Reference | リストアイテムのアイコンを指定します。 |
| data-iconpos | left | right | top | bottom | notext | アイコンの位置を指定します。 |
Navbarsは、親コンテナからテーマスウォッチを継承します。 ナビゲーションバーにデータをテーマに属性を設定することはできません。 データ・テーマ属性は、ナビゲーションバー内の各リンクに個別に設定することができます。
ページ
コンテナdata-role="page" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-dom-cache | true | false | 個々のページのためのjQueryのDOMキャッシュかどうかをクリアするかどうかを指定します（trueに設定されている場合、あなたはDOMを自分で管理し、すべてのモバイルデバイスで徹底的にテストするために世話をする必要があります） |
| data-overlay-theme | letter (a-z) | ダイアログ・ページのオーバーレイ（背景）の色を指定します。 |
| data-theme | letter (a-z) | ページのテーマカラーを指定します |
| data-title | sometext | ページタイトルを指定します。 |
| data-url | url | 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-tolerance | 30, 15, 30, 15 | ウィンドウの端からの距離を指定します（ top, right, bottom, left ） |
アンカーdata-rel="popup" ：
| データ属性 | 値 | 説明 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | ポップアップボックスの位置を指定します。 起源 - デフォルト。 それを開くリンクの上で、ポップアップを配置します。 jQueryのセレクタ - 指定された要素の上で、ポップアップを配置します。 ウィンドウ - ウィンドウ画面の中央に位置ポップアップを。 |
| data-rel | popup | ポップアップボックスを開きます |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 次のページへ移行する方法を指定します。 私たちを参照してくださいjQueryのモバイルトランジション章を。 |
ラジオボタン
ラベルと入力のペアtype="radio" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-mini | true | false | ボタンが小さいか、通常のサイズのものかどうかを指定します |
| data-role | none | jQueryのモバイルは、スタイルに防ぎradiobuttons強化ボタンとして |
| data-theme | letter (a-z) | ラジオボタンのテーマカラーを指定します。 |
グループの複数のラジオボタンに、使用するdata-role="controlgroup"と一緒にdata-type="horizontal|vertical"かどうかのグループに水平または垂直のボタンを指定します。
選択します
すべて<select>要素を。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-icon | Icons Reference | select要素のアイコンを指定します。 デフォルトは"arrow-d" |
| data-iconpos | left | right | top | bottom | notext | アイコンの位置を指定します。 |
| data-inline | true | false | select要素は、インラインすべきか否かを指定します |
| data-mini | true | false | 選択が小さいか、通常のサイズのものかどうかを指定します |
| 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のモバイルは、ボタンなどのスタイルを選択要素に防ぎます |
| data-theme | letter (a-z) | select要素のテーマカラーを指定します。 |
グループの倍数に要素を選択し、使用するdata-role="controlgroup"一緒にdata-type="horizontal|vertical"かどうかのグループに水平または垂直要素を指定します。
スライダー
入力type="range" 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-highlight | true | false | スライダートラックが強調表示するかどうかを指定します |
| data-mini | true | false | スライダーが小さいか、通常のサイズのものかどうかを指定します |
| data-role | none | jQueryのモバイルは、ボタンなどのスタイルのスライダコントロールを防ぎます |
| data-theme | letter (a-z) | （入力、処理し、追跡）スライダコントロールのテーマカラーを指定します。 |
| data-track-theme | letter (a-z) | スライダートラックのテーマカラーを指定します。 |