jQuery Mobileの基礎/ページ
jQuery MobileでWebサイトを作成する際に、jQuery Mobileを使わない一般的なWebサイトの構築と異なるのがページの概念です。
一般的なWebサイトを構築する際には1つのHTMLファイルが1ページに相当します。それに対してjQuery Mobileではカスタムデータ属性data-role=”page”を持つdiv要素が1ページに相当します。
Hello jQuery Mobile / jQuery Mobileを使ってみるで紹介したサンプルでは１つのHTMLに２つのdata-role=”page”を持つdiv要素が、つまり２つのページが存在していることになります。
それでは続きでページとその複数のページ間での遷移について説明してきます。
1つのHTMLファイルに単一ページ
冒頭で説明した通り、jQuery Mobileでは１つのHTMLファイルに複数のページを記述することができます。
まずは１つのページのみを持つHTMLファイルを見てみましょう。
■jQueryMobileSamplePage1.html
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 | <<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div data-role="page" id="top"> <!-- ヘッダー --> <div data-role="header"> <h1>ヘッター</h1> </div> <!-- コンテンツ --> <div data-role="content"> <p>コンテンツ</p> </div> <!-- フッター --> <div data-role="footer"> <h1>フッター</h1> </div> </div></body></html> |
13行目の div data-role=”page” id=”top” から28行目までが１つのページとなります。
jQuery Mobileでは通常以下の要素で構成されます。
- ヘッダー
- コンテンツ
- フッター
1 2 3 4 5 | <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div></div> |
もちろん、ヘッダーなどは必ずしも必要というわけではありません。不要であれば記述しなくても問題ありません。ページの中は、自由にHTMLを記述することができます。
1つのHTMLファイルに複数ページ
それでは次は1つのHTMLファイルに複数ページを見てみましょう。
■jQueryMobileSample2.html
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 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div data-role="page" id="top"> <!-- ヘッダー --> <div data-role="header"> <h1>ヘッター</h1> </div> <!-- コンテンツ --> <div data-role="content"> <p>1ページ目だよ</p> <p><a href="#second">いざ、2ページ目へ</a></p> </div> <!-- フッター --> <div data-role="footer"> <h1>フッター</h1> </div></div><div data-role="page" id="second"> <!-- コンテンツ --> <div data-role="content"> <p>2ページ目</p> <p>ヘッダーとフッターが無いね</p> </div></div></body></html> |
カスタムデータ属性data-role=”page”を持つdiv要素が2つあります。つまり、2つのページが存在していることになります。
同じHTMLファイルの中の他のページに遷移する場合は、それらのページ（div要素）を識別するためにid属性を使います。
hrefタグでリンク先を指定する場合には#ID（例：#second）を指定します。サンプルではIDがsecondである2ページ目に遷移させています。
この2ページ目はヘッダーとフッターがありません。前述のように、このような書き方も可能です。
リンクをタッチ（クリック）し、ページ遷移する際には、遷移先のページが右からスライドするアニメーションが発生します。iPhoneなどのネイティブアプリケーションでよく見かけるアニメーションですね。
「戻る」リンク
#IDと書いて遷移した場合は、ページ移動の履歴が保存されます。その履歴を辿ってネイティブアプリケーションのように戻ることが可能です。
jQueryMobileSamplePage2.htmlに1行追加してみましょう。36行目に1行追加したものがjQueryMobileSamplePage3.htmlです。
■jQueryMobileSamplePage3.html
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 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div data-role="page" id="top"> <!-- ヘッダー --> <div data-role="header"> <h1>ヘッター</h1> </div> <!-- コンテンツ --> <div data-role="content"> <p>1ページ目だよ</p> <p><a href="#second">いざ、2ページ目へ</a></p> </div> <!-- フッター --> <div data-role="footer"> <h1>フッター</h1> </div></div><div data-role="page" id="second"> <!-- コンテンツ --> <div data-role="content"> <p>2ページ目</p> <p>ヘッダーとフッターが無いね</p> <p><a href="#hoge" data-rel="back">前のページに戻るよ</a></p> </div></div></body></html> |
hrefタグにdata-rel=”back”を追加してリンクを作成します。data-rel=”back”属性を追加したリンクはページ履歴を１つ戻ります。ネイティブアプリケーションと同様に右に消えていくアニメーションになります。
リンク先が#hogeになっていますがIDがhogeというページはこのファイルには存在していませんが、前のページに正しく戻っていることが確認出来ます。
今回は、 data-rel=”back”属性を付けるとページ履歴に従って戻ることを示すために存在しないIDを指定しましたが本来は存在するIDを指定すべきです。
これはJavaScriptに対応していないブラウザで表示した場合（＝jQueryMobileが動作しない）などにも正しく動作するために重要なことです。
以上、jQuery Mobileの基礎としてページを説明しました。おつかれさまでした。
About The Author
