jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通りです。
１．data-role="page"を付したHTMLタグを<body>内に必要なページの分だけ追加する。
２．１で追加したタグに、書くページを判別するためのid属性を付す
３．それぞれのページで遷移(表示)するためのリンクを作成する。
data-role="page"を付したHTMLタグを<body>内に必要なページの分だけ追加する。
ページを作成するには、data-role="page"を追加したタグでコンテンツを囲みます。この囲んだものをbodyタグの中に複数書けば、それだけで複数ページを作成することができます。
追加したタグに、書くページを判別するためのid属性を付す
data-role="page"を付したタグで複数ページを作成しても、１ページ目しか表示されません。他のページを表示するには、それぞれページへ遷移するリンクを設定します。その遷移先のリンクを示すのがid属性です。id属性は、HTML文書内のどのタグにも設定できますが、同じ文書内で重複した値を設定できません。
それぞれのページで遷移(表示)するためのリンクを作成する。
ページを囲むタグにid属性を設定したら、それぞれのページに遷移するリンクを作成します。今回のサンプルコードではaタグを使っています。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jqueryMobileで複数ページを表示する</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>１ページ目</h1> </header> <article data-role="content"> <h1>１ページ目</h1> <a href="#page2">ページ２へ</a> </article> <footer data-role="footer" class="ui-bar"> <h1>フッター</h1> </footer> </section> <section id="page2" data-role="page"> <header data-role="header"> <h1>２ページ目</h1> </header> <article data-role="content"> <h1>２ページ目</h1> <a href="#page3">ページ３へ</a> </article> <footer data-role="footer" class="ui-bar"> <h1>フッター</h1> </footer> </section> <section id="page3" data-role="page"> <header data-role="header"> <h1>３ページ目</h1> </header> <article data-role="content"> <h1>３ページ目</h1> <a href="#page1">ページ１へ</a> </article> <footer data-role="footer" class="ui-bar"> <h1>フッター</h1> </footer> </section> </body> </html> |
各ページのタイトル
同じHTML文書内に複数ページを作成したとき、data-role="page"が追加された最初のタグが１ページとして扱われます。このページのデフォルトのタイトルはtitleタグに囲まれた文字列です。
２ページ以降のデフォルトのタイトルは、ヘッダ(data-role="header"を追加したタグ)内の<h1>～<h6>で囲まれた文字列です。これは、それぞれのページが画面に表示されるときにtitleタグ内の文字列を変更することで表現しています。これを変更するとブラウザ画面に表示されるHTML文書のタイトルも変更されます。
別のHTML文書へのリンク
別のHTML文書に遷移するリンクを作成するときは、リンク先にその文書を示すURLを設定します。リンク先のHTML文書の読み込みはajax(ページの部分的な書き換え)により実行されます。