2

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

4

1 に答える 1

0

Jquery Mobile は、アドレスへの#addressナビゲーションをpage名前付きへのナビゲーションとして解釈します。address

index.htmlこれは、たとえば、単一の 2 ページで定義できることを意味します。

<div data-role="page" id="index.html"><a href="#page2.html">link to JQM page2</a></div>
<div data-role="page" id="page2.html">... content here ...</div>

最初のページのリンクをクリックすると、2 番目のページのコンテンツが読み込まれ、それに応じてブラウザのアドレス バーに表示される場所が更新されます。これは標準的な JQM アプローチであり、たとえばリンク先のスタンフォード Web サイトで使用されています。pagechangeDisney と Fish の Web サイトは、イベントにバインドし、ターゲット アドレスを分析し、それに応じて動作することでターゲット ページを動的に生成しているように見えるため、少し異なることを行っているように見えます。jquery mobile docsでページの動的生成の詳細を確認できます。

于 2012-10-29T14:17:52.013 に答える