jQuery Mobileにおけるページの考え方
jQuery MobileでWebサイトを制作するとき、一般的なWebサイトの制作と大きく異なるが「ページ」の概念です。一般的なWebサイトの場合は1ページ＝1HTMLファイルですが、jQuery Mobileではカスタムデータ属性「data-role="page"」を持つdiv要素が1ページになります。
たとえば、次のようなHTMLでは「data-role="page"」を持つdiv要素が5つあるので、全部で5ページのサイトを表しています。
■サンプル1[HTML]
<body>
<div data-role="page" id="index">
TOPページ
</div>
<div data-role="page" id="about">
to-Rについて
</div>
<div data-role="page" id="seminar">
セミナー情報
</div>
<div data-role="page" id="access">
アクセス
</div>
<div data-role="page" id="contact">
お問い合わせ
</div>
</body>
カスタムデータ属性「data-role="page"」を付けたそれぞれのdiv要素には、各ページを識別するためにid属性でページ名を定義しておきます。サンプル1では、「index」「about」「seminar」「access」「contact」と付けました。このdiv要素の中に、それぞれのページに表示したい内容（コンテンツ）を記述していくわけです。
サンプル1をブラウザーで表示すると、最初にページとして定義している「TOPページ」のdiv要素（id="index"）だけが表示され、他のページは表示されません。
最初のページであるindexの内容のみがページとして表示される
ページ遷移
jQuery Mobileでは複数のページを1つのHTMLに記述するので、ページ遷移にはページ内リンクを利用します。
サンプル2は、TOPページ（id="index）から「to-Rについて」（id="about"）へのリンクを設定した例です。リンクをタップすると、a要素のhref属性に指定したidのページへ遷移します。
■サンプル2[HTML]
<div data-role="page" id="index">
<h3>TOPページ</h3>
<p><a href="#about">to-Rについて</a></p>
</div>
<div data-role="page" id="about">
<h3>to-Rについて</h3>
<p><a href="#index">TOPページ</a></p>
</div>
リンクをタップするとスライドしてページが切り替わる
