Page
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | page | ページ |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-fullscreen | true | フルスクリーン表示 | |
| false | * | ||
| data-add-back-btn | true | * | Backボタンを自動生成するか |
| false | |||
| data-back-btn-text | 任意 | Back | 自動生成Backボタンのテキスト |
| data-back-btn-theme | 任意 | c | デフォルトテーマはa〜e |
| data-keep-native | 任意 | ネイティブで利用するUIをセレクターで指定する | |
| data-close-btn-text | 任意 | ダイアログとして表示した場合の閉じるボタンのテキスト |
例
<div data-role="page" data-add-back-btn="false">
Header
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | header | ヘッダー Pageに含める |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-position | inline | * | |
| fixed | 画面上部で固定表示 | ||
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-backbtn | true,false | true |
例
<div data-role="header" data-theme="a">
Content
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | content | ページコンテンツ Pageに含める |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-theme | 任意 | c | デフォルトテーマはa〜e |
Footer
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | footer | フッター Pageに含める |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-position | inline | * | |
| fixed | 画面下部で固定表示 | ||
| data-id | 任意 | 複数のページ間で固定のフッターを定義する。 data-position:fixed必須。 |
|
| class | ui-bar | フッター内の要素の自動パディング | |
| data-theme | 任意 | c | デフォルトテーマはa〜e |
Navigation Bar
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | navbar | パネルボタンで構成されたツールバー Header、またはFooterに含める 子要素としてul要素(li要素にリンク)を定義する。 |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-iconpos | top | パネルボタンのアイコンの位置 |
Page Link
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| a | - | - |
エフェクト付きで画面遷移する。 リンク先のPage要素を#idで指定するか、URLを相対パス指定でする。 別ドメインへのリンクか、以下のいずれかを指定すると、通常のリンクとなる。 rel="external" target="任意" ※ローカル環境での外部ファイルの読み込みはSame-Originポリシーに引っかかって動作しない |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-transition | slide | * | 画面遷移のエフェクト |
| slideup | |||
| slidedown | |||
| pop | |||
| fade | |||
| flip | |||
| data-direction | reverse | 遷移エフェクトを逆にする | |
| data-rel | back | 戻る | |
| dialog | 遷移先のページをDialogとして表示する | ||
| data-ajax | false | ajaxによる遷移を行わない |
例
<a href="#pageone" data-transition="flip" data-role="button" />
Dialog
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| a | data-rel | dialog | 遷移先のページをDialogとして表示する（Page Linkの項を参照） |
Form
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| form | - | - | Ajaxでformデータを送信する |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-ajax | true | * | formデータの送信にAjaxを利用する |
| false |
Button
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| input | type | button submit reset image | ボタン |
| a | data-role | button | |
| button |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-icon | arrow-l | アイコン種類 | |
| arrow-r | |||
| arrow-u | |||
| arrow-d | |||
| delete | |||
| plus | |||
| minus | |||
| check | |||
| gear | |||
| refresh | |||
| forward | |||
| back | |||
| grid | |||
| star | |||
| alert | |||
| info | |||
| search | |||
| home | |||
| data-iconpos | left | * | アイコン位置 |
| right | |||
| top | |||
| bottom | |||
| notext | |||
| class | ui-btn-left | * | Header要素内のボタン位置 |
| ui-btn-right | |||
| ui-btn-active | 選択状態 | ||
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-inline | false | * | インライン要素として扱う |
| data-role | none | ネイティブのUIを使う |
例
<input type="submit" class="ui-btn-right" data-icon="forword" value="送信ボタン" />
Form Elements
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| input | type | text | テキスト入力 |
| password | パスワード入力 | ||
| search | 検索ボックス | ||
| range | スライダー入力 | ||
| radio | ラジオボタン（label要素が必要） | ||
| checkbox | チェックボックス（label要素が必要） | ||
| select | data-role | slider | フリップ・トグルスイッチ option要素を2つにする必要がある。 |
| textarea | - | - | テキストエリア入力 |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-role | none | ネイティブのUIを使う | |
| data-track-theme | 任意 | c | スライダー(range)のトラック部分のテーマ |
※各フォームはlabelを指定すると、画面幅が480px以上になった場合に自動的に2カラムに調整される
Select menus
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| select | セレクトボックス デフォルトでは、ボタンの外観にネイティブのセレクトメニューが表示される jQuery Mobile独自のセレクトメニューを使う場合は、data-native-menu="false"を指定する 項目数が少ない場合は、選択リストがオーバーレイ表示される 項目数が多い場合は、選択リストがダイアログ表示される ラベルがダイアログのタイトルとなる valueが指定されていないoption要素が見出しとなる 子要素のoptgroupで区切りラベルを挿入可能（label） |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| multiple | 複数選択可能 boolean属性（指定する場合、multipleのみ記述する） multipleを使う場合、ネイティブで対応していないブラウザがあるため、独自メニューを使うことを推奨 |
||
| data-icon | buttonと同じ | アイコン種類 | |
| data-iconpos | left | * | アイコン位置 |
| right | |||
| top | |||
| bottom | |||
| notext | |||
| data-disabled | false | フォームの無効 | |
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-menu-page-theme | 任意 | ダイアログ表示のテーマ | |
| data-overlay-theme | 任意 | オーバーレイ表示のテーマ | |
| data-native-menu | false | セレクトメニューをリッチにする | |
| data-hide-placeholder-menu-items | false | value属性のないoption要素をプレースホルダーとしない その場合、option要素にdata-placeholder="true"とする |
|
| data-close-text | 任意 | Close | ダイアログの閉じるボタンのテキスト |
| data-inline | false | * | インライン要素として扱う |
| data-role | none | ネイティブのUIを使う |
Fieldcontain
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | fieldcontain | 入力フォームとラベル要素を囲む。モバイル向けに最適な余白と区切り線を追加する |
| fieldset |
Control Group
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | controlgroup | 複数の要素をグルーピングする。 Button、Radio、Checkbox要素など |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-type | vertical | * | 垂直方向でグルーピング |
| horizontal | 水平方向でグルーピング |
Grid
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | class | ui-grid-a | ui-grid-aは横2分割、ui-grid-bは横3分割。以降5分割まで。 子要素としてdiv要素のclass:ui-block-a〜ui-block-eに対応する。 |
| ui-grid-b | |||
| ui-grid-c | |||
| ui-grid-d | |||
| fieldset | class | 同上 | |
| data-theme | 任意 | c | デフォルトテーマはa〜e |
Collapsible
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | collapsible | 開閉可能なブロック。見出しが必須(h1〜h6要素) data-role:collapsible-setのdiv要素でグループ化することができる |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-collapsed | true | 初期表示を閉じた状態にする | |
| false | * | ||
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-icon-theme | 任意 | c | アイコンのテーマ |
List
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| ul | data-role | listview | リスト (List/Read-only List) |
| ol | data-role | listview | 番号付きリスト (Numbered List) |
使える属性
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-inset | true | リストを画面表示幅まで詰めない | |
| false | * | ||
| data-filter | true | リスト内の検索を行う検索ボックスを表示する | |
| false | * | ||
| data-filter-placeholder | 任意 | 検索ボックスのプレースホルダー | |
| data-theme | 任意 | c | デフォルトテーマはa〜e |
| data-divider-theme | 区切りリストのテーマ | ||
| data-count-theme | カウントバブルのテーマ指定 | ||
| data-split-theme | 区切りボタンリストのテーマ指定 | ||
| data-header-theme | ヘッダーのテーマ指定 | ||
| data-split-icon | 任意 | gear | 区切りボタンリストのボタンアイコン |
その他 ※li要素などに対する指定。複数組み合わせ可能
| リスト種類 | 条件 | 備考 |
|---|---|---|
| リンク付きリスト (Linked List) |
li要素にリンクを含む li要素にdata-icon:任意でアイコンを指定可能 |
リンクを表示する |
| 入れ子リスト (Nested List) |
子要素にul、またはol要素を含む | リストを入れ子にする |
| 区切りボタンリスト Split button List |
li要素にリンクを2つ含む | 右部に新たなパネルボタンを追加する |
| 区切りリスト | li要素にdata-role:list-dividerを指定する。 | リスト見出しを表示する |
| カウントバブル | li要素にspan要素を含む span要素にclass:ui-li-countを指定する |
カウントを表示する |
| サムネイル | 子要素にimg要素を含む | サムネイルを表示する |
| アイコン | 子要素にimg要素を含む img要素にclass:ui-li-iconを指定する |
アイコンを表示する |
| ラベル | li要素にh1〜h6要素を含む | ラベルを表示する |
| 詳細 | li要素にp要素を含む | ラベル下に詳細を表示する |
| 補足 | li要素にp要素を含む p要素にclass:ui-li-asideを指定する |
右上に補足を表示する |