jQuery Mobile は、HTML5 の HTML5 data-* 属性 を使用して、 モバイルデバイス用の「タッチフレンドリー」で魅力的な外観を作成します。
下のリファレンス・リストで、太字の値はデフォルト値を示しています。
バージョン 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-type="horizontal|vertical" と共に data-role="controlgroup" 属性を持つコンテナを使用して、 ボタンを横または縦にグループ化することを指定します。
ラベルと type="checkbox" を持つ入力のペアです。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-mini | true | false | チェックボックスのサイズを小さくするか通常サイズにするかを指定する |
| data-role | none | jQuery Mobile がチェックボックスをボタンとしてスタイルするのを抑止する |
| data-theme | letter (a-z) | チェックボックスのテーマの色を指定する |
複数のチェックボックスをグループ化するには、data-type="horizontal|vertical"と共に data-role="controlgroup" を使用して、 チェックボックスを横または縦にグループ化することを指定します。
data-role="collapsible" を持つコンテナ内のヘッダ要素に続く全ての HTML マークアップです。
| データ属性 | 値 | 説明 |
|---|---|---|
| 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 | コンテンツを展開したときに折畳み可能なボタンのアイコンを指定する。デフォルトは「マイナス」です |
| 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 | 折畳みの角を丸くしたり、マージンを設定するかどうかを指定する |
| data-mini | true | false | 折畳み可能なボタンのサイズを小さくするか、通常のサイズにするかを指定する |
| data-theme | letter (a-z) | 折畳み可能なセットのテーマの色を指定する |
バージョン1.4では非推奨、1.5では削除されます。 data-role="content" を持つコンテナ。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-theme | letter (a-z) | コンテンツのテーマの色を指定する |
data-role="controlgroup" を持つ <div> または <fieldset> コンテナ。 1つのタイプ（リンクベースのボタン、ラジオボタン、チェックボックス、select 要素）の入力を、複数のボタンスタイルにグループ化します。 フォームのチェックボックスとラジオボタンをグループ化する場合、ラベルのスタイルを改善するために、"ui-fieldcontain" クラスを持つ <div> の中に <fieldset> を入れることをお勧めします。
| データ属性 | 値 | 説明 |
|---|---|---|
| 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 はページをモバイルデバイスに適したものに自動的にスタイルする。 "false"に設定した場合、フレームワークはページにスタイルを設定しない |
| data-ajax | true | false | ページを ajax 経由で読み込むかどうかを指定する |
注: jQuery Mobile が、ページを自動的にスタイルするのを停止するには、$.mobile.ignoreContentEnabled=true" と一緒に data-enhance="false" を使用しなければなりません。
data-ajax="false" コンテナ内のリンクまたはフォーム要素は、$.mobile.ignoreContentEnabled が true に設定されている場合、 フレームワークのナビゲーション機能によって無視されます。
バージョン1.4では非推奨、1.5では削除されます。代わりに class="ui-fieldcontain" を使用してください。 ラベル/フォーム要素のペアがラップされた data-role="fieldcontain" を持つコンテナです。
data-position="fixed" 属性と一緒に data-role="header" または data-role="footer" を持つコンテナです。
| データ属性 | 値 | 説明 |
|---|---|---|
| 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 Mobile は、常に "pageshow" イベントでパディングを更新します） |
| data-visible-on-page-show | true | false | 親ページが表示されているときのツールバーの表示を指定する |
data-role が "flipswitch" の <input type="checkbox"> です：
| データ属性 | 値 | 説明 |
|---|---|---|
| data-mini | true | false | スイッチのサイズを小さくするか、通常のサイズにするかを指定する |
| data-on-text | sometext | フリップスイッチの テキストを "on" にする（デフォルトは "on"） |
| data-off-text | sometext | フリップスイッチの テキストを "off" にする（デフォルトは "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" ボタンのテキストを指定する。デフォルトは "clear text" です |
| data-mini | true | false | 入力が小さいか普通のサイズかを指定する |
| data-role | none | jQuery Mobile が入力/テキストエリアをボタンとしてスタイルするのを抑止する |
| data-theme | letter (a-z) | 入力フィールドのテーマの色を指定する |
すべてのリンク。
| データ属性 | 値 | 説明 |
|---|---|---|
| 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 | リンクの動作方法のオプションを指定する。Back - 履歴を1つ後退する。Dialog - 履歴内のリンクを追跡せずに、ダイアログとしてリンクを開く。 External - 別ドメインにリンクする。Popup - ポップアップウィンドウを開く |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | あるページから次のページへの遷移方法を指定する。 jQuery Mobile Transitions の章を参照 |
| data-position-to | origin | jQuery selector | window | ポップアップボックスの位置を指定する。Origin - デフォルト。ポップアップを開くリンク上にポップアップを配置する。 jQuery selector - 指定した要素の上にポップアップを配置する。Window - ポップアップを window 画面の中央に配置する |
data-role="listview" を持つ <ol> または <ul>
| データ属性 | 値 | 説明 |
|---|---|---|
| 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 placeholder 属性を使用してください。 検索ボックス内のテキストを指定する。 デフォルトは "Filter items..." です |
| data-filter-theme | letter (a-z) | 検索フィルタのテーマの色を指定する |
| data-icon | Icons Reference | リストのアイコンを指定する |
| data-inset | true | false | リストに角丸やマージンを付けたりするかどうかを指定する |
| data-split-icon | Icons Reference | 分割ボタンのアイコンを指定する。デフォルトは "arrow-r" です |
| data-split-theme | letter (a-z) | 分割ボタンのテーマ色を指定する |
| data-theme | letter (a-z) | リストのテーマの色を指定する |
data-role="listview" を持つ <ol> または <ul> 内の <li> 。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-filtertext | sometext | 要素をフィルタリングするときに検索するテキストを指定する。 このテキストは実際のリスト項目テキストの代わりにフィルタされる |
| data-icon | Icons Reference | リスト項目のアイコンを指定する |
| data-role | list-divider | リスト項目のディバイダを指定する |
| data-theme | letter (a-z) | リスト項目のテーマの色を指定する |
注: data-icon 属性はリンク付きのリスト項目に対してのみ機能します。
data-role="navbar" を持つコンテナ内の <li> 要素。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-icon | Icons Reference | リスト項目のアイコンを指定する |
| data-iconpos | left | right | top | bottom | notext | アイコンの位置を指定する |
Navbar は、親コンテナから theme-swatch を継承します。 data-theme 属性を navbar に設定することはできません。 data-theme 属性は、navbar 内の各リンクに個別に設定できます。
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) | ポップアップボックスのオーバーレイ（背景）の色を指定する。デフォルトは透明な背景です（none）。 |
| data-shadow | true | false | ポップアップボックスに影を表示するかどうかを指定する |
| data-theme | letter (a-z) | ポップアップボックスのテーマの色を指定する。デフォルトは継承され、"none" はポップアップを透明に設定する |
| data-tolerance | 30, 15, 30, 15 | window の（上、右、下、左）端からの距離を指定する |
data-rel="popup" を持つアンカー：
| データ属性 | 値 | 説明 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | ポップアップボックスの位置を指定する。Origin - デフォルト。ポップアップを開くリンク上にポップアップを配置する。 jQuery selector - 指定された要素の上にポップアップを配置する。Window - ポップアップを window 画面の中央に配置する |
| data-rel | popup | ポップアップボックスを開く場合 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | あるページから次のページへの遷移方法を指定する。jQuery Mobile Transitions の章を参照 |
type="radio" を持つラベルと入力のペア。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-mini | true | false | ボタンのサイズを小さくするか、通常のサイズにするかを指定する |
| data-role | none | jQuery Mobile がラジオボタンを拡張ボタンとしてスタイルするのを抑止する |
| data-theme | letter (a-z) | ラジオボタンのテーマの色を指定する |
複数のラジオボタンをグループ化するため、data-type="horizontal|vertical" とともに data-role = "controlgroup" を使用して、 ボタンを横か縦のグループにすることを指定します。
全 <select> 要素。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-icon | Icons Reference | 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 独自のカスタム select メニューが使用される （select メニューを、すべてのモバイルデバイスに同じものを表示させたい場合に推奨） |
| data-overlay-theme | letter (a-z) | jQuery 独自のカスタム select メニューのテーマの色を指定する（data-native-menu="false" と共に使用） |
| data-placeholder | true | false | 非ネイティブ select の <option> 要素で設定できる |
| data-role | none | jQuery Mobile が select 要素をボタンとしてスタイルするのを抑止する |
| data-theme | letter (a-z) | select 要素のテーマの色を指定する |
複数の select 要素をグループ化するために、data-type="horizontal|vertical" とともに data-role="controlgroup" を使用して、 ボタンを横か縦のグループにすることを指定します。
type="range" を持つ入力。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-highlight | true | false | スライダトラックをハイライト表示するかどうかを指定する |
| data-mini | true | false | スライダを小さくするか、通常のサイズにするかを指定する |
| data-role | none | jQuery Mobile がスライダコントロールをボタンとしてスタイルするのを抑止する |
| data-theme | letter (a-z) | スライダコントロール（入力、ハンドル、トラック）のテーマの色を指定する |
| data-track-theme | letter (a-z) | スライダトラックのテーマの色を指定する |