jQuery Mobile リファレンス的なもの

jQuery Mobile のリファレンス的なものを作りました。
取り敢えず叩き台で、ツッコミなどあればコメントください！

※RC2版に対応しました

Page

要素	属性	値	概要
div	data-role	page	ページ

設定	値	既定	備考
data-fullscreen	boolean	false	フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある）
data-add-back-btn	boolean	false	戻るボタンの自動生成
data-back-btn-text	任意	"Back"	自動生成された戻るボタンのテキスト
data-keep-native	任意		ネイティブで利用するUIをセレクターで指定する
data-dom-cache	boolean	false	ページをキャッシュする
data-theme	任意	c	テーマ（a-e）
data-back-btn-theme	任意		自動生成された戻るボタンのテーマ（a-e）
data-header-theme	任意	a	ヘッダーのテーマ（a-e）
data-content-theme	任意	c	コンテンツのテーマ（a-e）
data-footer-theme	任意	a	フッターのテーマ（a-e）

Header

要素	属性	値	概要
div	data-role	header	Pageに含めるヘッダー

設定	値	既定	備考
data-position	inline	*
	fixed		固定ヘッダー
data-id	任意		同一のdata-idのヘッダーを持つページ同士の遷移では、ヘッダーを遷移エフェクトに含めずに表示状態のまま固定する（要data-position="fixed"）
data-theme	任意	a	テーマ（a-e）
class	ui-bar	-	ヘッダーにUIを含める場合の適切なマージンを設定する

Content

要素	属性	値	概要
div	data-role	content	Pageに含めるコンテンツ

設定	値	既定	備考
data-theme	任意	c	テーマ（a-e）

Footer

要素	属性	値	概要
div	data-role	footer	Pageに含めるフッター

設定	値	既定	備考
data-position	inline	*
	fixed		固定フッター
data-id	任意		同一のdata-idのフッターを持つページ同士の遷移では、フッターを遷移エフェクトに含めずに表示状態のまま固定する（要data-position="fixed"）
data-theme	任意	a	テーマ（a-e）
class	ui-bar	-	フッターにUIを含める場合の適切なマージンを設定する

Navigation Bar

要素	属性	値	備考
div	data-role	navbar	Header、Footerに含めるナビゲーションバー 子要素として<ul>要素（<li>要素に各リンクを入れる）を定義する。

設定	値	既定	備考
data-iconpos	*1	top	パネルボタンのアイコンの位置

Page Link

要素	属性	値	概要
a	-	-	ページ遷移 リンク先のPage要素を#idで指定するか、URLを指定する。 別ドメインへのリンクか、以下のいずれかを指定すると、通常のリンクとなる。 rel="external" target="[任意]" data-ajax="false" ※ローカル環境での外部ファイルの読み込みはブラウザの制限で動作しない

設定	値	既定	備考
data-transition	slide	*	ページ遷移のエフェクト
	slideup
	slidedown
	pop
	fade
	flip
data-direction	reverse		遷移エフェクトを逆にする
data-rel	back		ページを戻る
	dialog		遷移先のページをダイアログ表示する
data-ajax	boolean	true	自動ajax
data-prefetch	boolean	false	ページの事前読み込み

Dialog

要素	属性	値	概要
div	data-role	page	<a>要素にdata-role="dialog"を指定する（Page Linkの項を参照）

設定	値	既定	備考
data-close-btn-text	任意	"Close"	閉じるボタンのツールチップ

Form

要素	属性	値	概要
form	-	-	ajaxでformデータを送信する 送信先のページでページ要素を返す必要がある。

設定	値	既定	備考
data-ajax	boolean	true	自動ajax

Button

要素	属性	値	概要
input	type	button	ボタン（type="image"の画象は無視される）
		submit
		reset
		image
a	data-role	button
button	-	-

設定	値	既定	備考
data-corners	boolean	true	ボタンを角丸にする
data-shadow	boolean	true	ボタンに影をつける
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	*	アイコン位置（data-iconpos="notext"はアイコンのみの表示）
	right
	top
	bottom
	notext
data-iconshadow	boolean	true	アイコンに影をつける
data-inline	boolean	false	インライン要素として扱う
data-theme	任意	c	テーマ（a-e）
data-disabled	boolean	false	有効／無効
data-role	none		ネイティブのUIを使う
class	ui-btn-left		Header要素内に配置したボタン位置
	ui-btn-right
	ui-btn-active		選択状態

Form Elements

要素	属性	値	備考
input	type	text	テキスト
		password	パスワード
		search	検索ボックス
		range	スライダー
		radio	ラジオボタン（<label>要素必須）
		checkbox	チェックボックス（<label>要素必須）
select	data-role	slider	フリップスイッチ（<option>要素を2つ含める）
textarea	-	-	テキストエリア

設定	値	既定	備考
data-role	none		ネイティブのUIを使う
data-theme	任意	c	テーマ（a-e）
data-track-theme	任意	c	スライダー(range)のトラック部分のテーマ
data-disabled	boolean	false	有効／無効

※各フォームにラベルを組み合わせると、画面幅が480px以上になった場合に自動的に2カラムに調整される

Select menus

要素	属性	値	備考
select	-	-	セレクトメニュー カスタムセレクトメニューを使う場合は、data-native-menu="false"を指定する。 すべてのオプションが画面に表示できる場合は、オプション一覧がオーバーレイ表示される。表示できない場合は、オプション一覧がダイアログ表示される。その場合、ラベルがオプション一覧ページのタイトルとなる。 valueが指定されていない<option>要素が見出しとなる。 <optgroup>でオプションのグループ化が可能。

設定	値	既定	備考
data-native-menu	boolean	false	カスタムセレクトメニュー
data-corners	boolean	true	ボタンを角丸にする
data-shadow	boolean	true	ボタンに影をつける
data-icon	*2	arrow-d	アイコン種類
data-iconpos	*3	right	アイコン位置
data-iconshadow	boolean	true	アイコンに影をつける
data-hide-placeholder-menu-items	boolean	false	value属性のない<option>要素をプレースホルダーとしない その場合、<option>要素にdata-placeholder="true"をプレースホルダーとする
data-close-text	任意	"Close"	オプション一覧ページの閉じるボタンのツールチップ
data-inline	boolean	false	インライン要素として扱う
data-theme	任意	c	テーマ（a-e）
data-menu-page-theme	任意	c	オプション一覧ページのテーマ（a-e）
data-overlay-theme	任意	c	オプション一覧のテーマ（a-e）
data-role	none		ネイティブのUIを使う
data-disabled	boolean	false	有効／無効
multiple	boolean	false	複数選択

Fieldcontain

要素	属性	値	備考
div	data-role	fieldcontain	入力フォームとラベルを囲む。マージンとスプリッターを追加する

Control Group

要素	属性	値	概要
div	data-role	controlgroup	グループ化する（ボタン、ラジオボタン、チェックボックス、セレクトメニュー）

設定	値	既定	備考
data-type	vertical	*	垂直方向で結合する
	horizontal		水平方向で結合する

Grid Layout

要素	属性	値	備考
div	class	ui-grid-a	class="ui-grid-a"〜"ui-grid-d"で2〜5列となる。子要素に<div>要素を含め、class="ui-block-a"〜"ui-block-e"で各列対応する。行は、対応する子要素を繰り返す。
		ui-grid-b
		ui-grid-c
		ui-grid-d

設定	値	既定	備考
data-theme	任意		テーマ（a-e）

Collapsible block

要素	属性	値	備考
div	data-role	collapsible	開閉可能なブロック。見出しが必須(h1〜h6要素) data-role:collapsible-setのdiv要素でグループ化することができる

設定	値	既定	備考
data-collapsed	boolean	true	初期表示を閉じた状態にする
data-theme	任意	c	テーマ（a〜e）
data-icon-theme	任意	c	アイコンのテーマ（a-e）

List

要素	属性	値	備考
ul	data-role	listview	リスト (List/Read-only List)
ol	data-role	listview	番号付きリスト (Numbered List)

設定	値	既定	備考
data-inset	boolean	false	角丸リスト
data-filter	boolean	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	区切りボタンリストのボタンアイコン

その他

オプション	条件	説明
リンクリスト (Linked List)	リンク可能なリスト	<li>要素内のすべての要素を<a>要素で囲む。data-icon属性でアイコンを指定可能
入れ子リスト (Nested List)	リストが入れ子になっているリスト	<li>要素内に<ul>／<ol>要素を含める。追加したリストにdata-role="listview"は不要
区切りボタンリスト (Split button List)	リスト右側にパネルボタンを表示	<li>要素内に<a>要素を2つ含める
リスト見出し	リストの見出しを表示する	<li>要素にdata-role="list-divider"を指定する
カウントバブル	リスト右側にカウントバブルを表示する	<li>要素に<span class="ui-li-count">を含む
サムネイル	リストに画像をサムネイル表示する	<li>要素に<img>要素を含む
アイコン	リストに画像をアイコン表示する	<li>要素に<img class="ui-li-icon">要素を含む
見出しテキスト	アイテムの見出しテキストを表示する	<li>要素に<h1>〜<h6>要素を含む
詳細テキスト	リストの詳細テキストを表示する	<li>要素に<p>要素を含む
補足テキスト	リストの右上に補足テキストを表示する	<li>要素に<p class="ui-li-aside">要素を含む

2010/11/17 追記
collapsibleのdata-state属性がAlpha2でdata-collapsedに変更された。

2011/03/07 更新
alpha3に対応

2011/05/16 更新
alpha4.1に対応

2011/11/03更新
RC2版対応

*1:Buttonと同じ

*2:Buttonと同じ

*3:Buttonと同じ