jQueryMobileのページの記述

jQueryMobileでは１つのHTMLファイルで複数のページを持つことができます。ダイアログもページの１つとして作成します。
ページにはヘッダー、コンテンツ（本文）、フッター、サイドパネル、ポップアップを含むことができます。

<!DOCTYPE html>
<html> 
<head>
	<!-- //省略（jQueryMobileの基本構文　を参照） -->
</head>
<body>
	<!-- 1ページ目 -->
	<div data-role="page" id="page1">
		<div data-role="header">
			<h3>1ページ目ヘッダー</h3>
		</div>
		<div class="ui-content" role="main">
			<h3>1ページ目</h3>
			<a href="#page2">2ページ目へ</a>
			<a href="#dialog1" data-transition="pop">ダイアログ</a>
		</div>
	<div data-role="footer">
		<h3>1ページ目フッター</h3>
	</div>
	</div>
 
	<!-- 2ページ目 -->
	<div data-role="page" id="page2">
		<div class="ui-content" role="main">
			<h3>2ページ目</h3>
			<a href="#page1">1ページ目へ</a>
		</div>
	</div>
 
	<!-- ダイアログのページの始まり -->
	<div data-role="page" data-title="ダイアログ" id="dialog1" data-dialog="true">
		<div data-role="header" data-theme="b">
			<h2>ダイアログのヘッダー</h2>
		</div>
		<div  class="ui-content" role="main">
			<span>ですよねー。</span>
			<a href="#page1" data-role="button">閉じる</a>
		</div>
	</div>
</body>
</html>

DIVタグの属性data-role="page"が１つのページを示し、属性"data-title"でページごとにタイトルを指定できる

<div data-role="page" id="pg1" data-title="タイトルです">

ページ内のヘッダーについて

ページ内には１つのヘッダーを持つ事が出来、ヘッダー内にはナビゲーションボタン等を配置する事が出来る。
ヘッダー内には<h1>～<h7>タグを使ってタイトルを持つ事が出来る。

<div data-role="header">
	<h1>タイトル</h1>
</div>

ヘッダー内に<a>タグを入れると、最初のAタグはヘッダー内の左端のボタンになり、2つ目のAタグはヘッダー内の右端のボタンになる。

<div data-role="header">
	<a href="hoge.html">左端ボタン</a>
	<h3>タイトル</h3>
	<a href="hoge.html">右端ボタン</a>
</div>

ヘッダー内のAタグにはアイコンをつけたり（data-icon）、アイコンの位置を指定することもできる。

<div data-role="header">
	<a href="top.html" data-icon="gear" class="ui-btn-right">トップページ</a>
	<h1>タイトル</h1>
</div>

ヘッダーに指定できる属性

data-theme ヘッダーにテーマを設定する
指定できる値 "a"～"e"
（例）

<div data-role="header" data-theme="a">

data-position="fixed"
ヘッダーを固定配置する。
つまり、ブラウザ画面を上下方向へスクロールしても常時ヘッダーが表示される。
タップ（クリック）するとヘッダーが非固定表示と固定表示を交互に繰り替えす。
（例）

<div data-role="header" data-position="fixed">

以下、data-position="fixed"の時に有効な属性
data-visible-on-page-show="false"
ヘッダーの固定配置（data-position="fixed"）と共に使う。
data-visible-on-page-show="false"属性を設定すると、
初期状態ではヘッダーが固定配置されない。
タップ（クリック）するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
（例）

  <div data-role="header" data-position="fixed" data-visible-on-page-show="false">

data-fullscreen="true"
この属性を指定すると、コンテンツ（本文）の上に
ヘッダー（<div data-role="header"></div>）が重なって表示されます。
（例）

<div data-role="header" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">

data-tap-toggle="false"
ヘッダーの固定配置（data-position="fixed"）と共に使用する。
この属性を設定すると、画面をタップ（クリック）してもヘッダの固定表示と非固定表示が切り替えできなくなり、常時ヘッダーが固定表示になる。
（例）

<div data-role="header" data-position="fixed" data-tap-toggle="false">

data-transition="slide" 又は "fade" 又は "none"
ヘッダーをタップして表示するときの効果を設定。ヘッダーを表示するときにスライドするかフェードするか効果なしか

ページ内のコンテンツ（本文）について

jQueryMobile1.4のコンテンツ（本文）の記述は以下

<div class="ui-content" role="main">～本文</div>

（参考） jQueryMobile1.3までのコンテンツ（本文）の記述は以下

<div data-role="content">～本文</div>

ページ内のフッターについて

ページ内には１つのフッターを持つ事が出来、フッター内にはナビゲーションボタン等を配置する事が出来る。

<div data-role="page">
	<div data-role="footer">
		フッター
	</div>
</div>

フッターに指定できる属性

data-theme フッターにテーマを設定する
指定できる値 "a"～"e"
（例）

<div data-role="footer" data-theme="a">

data-position="fixed"
フッターを固定配置する。ブラウザ画面を上下方向へスクロールしても常時フッターが表示される。タップ（クリック）するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
（例）

<div data-role="footer" data-position="fixed">

data-visible-on-page-show="false"
フッターの固定配置（data-position="fixed"）と共に使う。
data-visible-on-page-show="false"属性を設定すると、初期状態ではフッターが固定配置されない。画面をタップ（クリック）したときに固定配置表示される。
（例）

<div data-role="footer" data-position="fixed" data-visible-on-page-show="false">

data-fullscreen="true"
この属性を指定すると、コンテンツ（<div data-role="content"></div>）の上にフッター（<div data-role="footer"></div>）が重なって表示されます。
（例）

<div data-role="footer" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">

data-tap-toggle="false"
フッターの固定配置（data-position="fixed"）と共に使用する。
この属性を設定すると、画面をタップ（クリック）してもフッターの固定表示と非固定表示が切り替えできなくなり常時フッターが固定表示になる。
（例）

<div data-role="header" data-position="fixed" data-tap-toggle="false">

data-transition="slide" 又は "fade" 又は "none"
フッターをタップして表示するときの効果を設定、フッターを表示するときにスライドするかフェードするか効果なしか