FC2ブログ

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

jQueryMobile を使うことにより
ひとつのHTMLファイルで複数のページを作成できます

正確には、
data-role="page" の id で分けているだけです

data-role="page" のid は新聞や雑誌の
記事のカテゴリーみたいなものと思ってください

以前、解説したように

Query Mobile では
page という概念があり、

1つのページに
ヘッダー
コンテンツ
フッター

という構成になります
ページは紙面 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 を特集記事
と考えればわかりやすいかも

このページの概念ができた背景として
スマートフォンは通信が3Gを使うのがほとんどのため
なるべく通信回数を減らし
快適にweb アプリを使うためというものがあります

あと、id は同じHTMLファイルの中で被ることがないものにしないとダメです

id を設定すれば
あとは
a タグで
通常のHTMLのときのように

<a href="#テレビ欄"><今日のテレビ番組情報</a>

というようにページ内リンクを作成できます

ページ内リンクをタップすると
画面がフェードして画面遷移します
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

trackback


この記事にトラックバックする(FC2ブログユーザー)

まとめtyaiました【ひとつのHTMLファイルで複数のページ】

jQueryMobile を使うことによりひとつのHTMLファイルで複数のページを作成できます正確には、data-role=

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック