ひとつのHTMLファイルで複数のページ

jQueryMobile を使うことにより
ひとつのHTMLファイルで複数のページを作成できます
正確には、
data-role=”page” の id で分けているだけです
data-role=”page” のid は新聞や雑誌の
記事のカテゴリーみたいなものと思ってください
以前、解説したように
Query Mobile では
page という概念があり、
１つのページに
ヘッダー
コンテンツ
フッター
という構成になります
ページは紙面 data-role=”page”
ヘッダーは見だし data-role=”header”
コンテンツは記事 data-role=”content”
フッターは下の見だし data-role=”footer”
となっています
なので、この page の id は
～の特集のような感じです
例えば
<div id=”週間天気” data-role=”page”>
<div data-role=”header”>
<h1>明日の天気</h1></div> <!– /header –>
<div data-role=”content”>
天気図一覧
</div> <!– /content –>
<div data-role=”footer”>
<h2>どこかの広告</h2></div> <!– /footer –>
</div> <!– pageの閉じタグ –>
<div id=”テレビ欄” data-role=”page”>
<div data-role=”header”>
<h1>今日のニュース</h1></div> <!– /header –>
<div data-role=”content”>
為替動向
</div> <!– /content –>
<div data-role=”footer”>
<h2>住宅ローンの広告</h2></div> <!– /footer –>
</div> <!– pageの閉じタグ –>
こんなかんじで
HTMLを新聞紙
id を特集記事
と考えればわかりやすいかも
このページの概念ができた背景として
スマートフォンは通信が３Gを使うのがほとんどのため
なるべく通信回数を減らし
快適にweb アプリを使うためというものがあります
あと、id は同じHTMLファイルの中で被ることがないものにしないとダメです
id を設定すれば
あとは
a タグで
通常のHTMLのときのように
<a href=”#テレビ欄”><今日のテレビ番組情報</a>
というようにページ内リンクを作成できます
ページ内リンクをタップすると
画面がフェードして画面遷移します