jQuery Mobileの基礎/ページ

| 2012年2月22日 | HTML5 | 2 Comments
Bookmark this on Hatena Bookmark

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

<<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</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では通常以下の要素で構成されます。

  • ヘッダー
  • コンテンツ
  • フッター
<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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</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

kkato

2 Comments