JQM が共通のナビゲーション システムを使用するためにリンクしているサンプル サイト (以下のような) のほとんどは、このサイトを例として使用します。
http://www.takemefishing.org/mobile/
まだ DOM にない別のページにリンクする場合、たとえば ajax ナビゲーションを使用します。たとえば、ホームページでは、href で「魚種」にリンクします。
#/mobile/fish-species
.
クリックすると、これは実際に ajax を介してページを DOM にロードします/mobile/fish-species
。<div data-role="page" id="fish-species">... content here ...</div>
すると、アドレスバーが に更新され/mobile/#/mobile/fish-species
ます。
直接アクセスすると/mobile/#/mobile/fish-species
(たとえば、更新ボタンまたは直接リンクを使用して)、すべての CSS、JS などを含むホームページが読み込まれ、ajax を介し/mobile/fish-species
て DOM にシームレスに読み込まれます。
この構造/システムは、ウォルト・ディズニーやスタンフォード大学などの JQM サイトで使用される一般的な方法のようです。
私の質問は、彼らがこの魔法をどのように実現しているのかということです。JQM がほぼすべての作業を行っていると思われますが、欠落している構成オプションまたはフラグがいくつかあります。
これが私が試したことです
CSS、JSなどが含まれるセクションと、別のページへのリンクを含む基本的なJQMホームページ/mobile/index.html
があります。DOCTPYE
<head>
page2.html
<li><a href="#/mobile/page2.html">Page 2</a></li>
ページ 2 は「Fish Species」ページに似ており、以下が含まれています。
<div data-role="page" id="page2.html">... content here ...</div>
これで、ホームページのリンクをクリックすると、page2.html が ajax 経由で DOM に読み込まれ、表示されます。問題は、アドレスバーに次のように表示されることです。
/mobile/page2.html
次に、ブラウザの更新ボタンをクリックするか、に直接移動すると、ブラウザはページのみを/mobile/page2.html
ロードし、ヘッダーセクションや CSS/JS は含まれません。page2.html
<div>
読み込まれたときにアドレスバーに表示されるリンクを取得するために何が欠けて#/mobile/page2.html
いますか?リフレッシュしたら、ホームページを読み込んで、サンプルサイトと同じように、ajax 経由で page2 を取り込みますか?
で最新の JQM を使用していますhttp://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js