ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。
data-url属性を使用したサンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 移動しないヘッダ、フッタIDを利用する</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">
		<article data-role="content">

			<p><a href="/01/page_2">To page2</a></p>

			<!-- data-urlの値がpage2に変更される -->
			<p><a href="#page2">To page2</a></p>
		</article>
	</section>

	<section id="page2" data-role="page" data-url="/01/page_2">
		<article data-role="content">
			<p>２ページ目のコンテンツ</p>
		</article>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile 移動しないヘッダ、フッタIDを利用する</title>

</head>

<body>

</article>

</section>

<p>２ページ目のコンテンツ</p>

</article>

</section>

</body>

</html>

サンプルコードの実行結果を確認すると、初めに表示されるページにはページ２へのリンクが２つあり、リンク先はそれぞれ"page_2","#page2"です。どちらもページ２へ遷移しますが違いもあります。このHTML文書が以下のURLで表示されるとします。

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/12.html

このURLから前者のリンクでページ２へ遷移すると、アドレスバーのURLが、

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/page_2

と設定されます。ブラウザのステータスバーでは、リンク先もこのように表示され、同じHTML文書内のページあれば、data-url属性でdomain以下の部分を値として設定すると、前のページとの行き来ができます。

ですが、後者のリンクでページ２へ遷移すると、アドレスバーのURLが

http://vesna-memo.com/wp-content/uploads/sampleCode/jQuery/mobile/study/01/12.html#page2

設定されますこれだけではなくページ２(id="page2")のdata-url属性の値も"page2"に変更されるので、これ以降前者のリンクでページを遷移することができなくなります。この設定は、同一のHTML文書内のページだけではなくて、異なるHTML文書のページに対しても同じことができます。ただ、Ajaxによるページ遷移時だけです。

リンク先のコンテンツを前もって読み込む

表示中とは別のHTML文書のコンテンツ(ページやダイアログ)にリンクしているとき、通常はリンクがタップ・クリックされてからリンク先のコンテンツをAjax通信で読み込んで表示します。ですが、ネットの通信環境により読み込みに時間がかかることがあります、

そんなときに利用するのが、リンクを設定するaタグにdata-prefetch="true"を追加しておくと、そのリンクを含むページが表示されるときに、リンク先のコンテンツも予め読み込む処理が行われます。読み込んだコンテンツが表示されるのは、それにリンクするaタグがクリック・タップされてからです。

こうすることで、画面の遷移時の待ち時間をユーザーに負担を感じさせずに済みますが、事前に読み込まれた時点のコンテンツが表示されるので、内容がリアルタイムのものではないことがあります。

DOMキャッシュの設定をする

表示中とは別のHTML文書からダイアログやページを読み込むときに、それらのタグにdata-dom-cache="true"という設定をすると、一度通信して読み込まれたページの内容が表示中のHTML文書内に記憶されたままとなります。記憶されたページを表示するときは、ページを読む込むための通信が発生しないので、表示がすばやくなりますが、記憶された内容は最初に読み込んだ時点の物なので、情報はリアルタイムに反映できません。

この設定をしていないとき、a.htmlからb.htmlに遷移することを何度も繰り返すとページを遷移させるたびにサーバーと通信してページの内容を取得します。１回の通信ならかかる時間は少ないですが、サービスの規模が大きくなり、ユーザーがたくさん同時に通信を行うと、サーバーに大きな負担がかかるので、data-dom-cache="true"はこういう時に効果を発揮します。