4

デフォルトでは、jQuery Mobileのajaxナビゲーションを使用して複数ページのテンプレートhtmlファイルをロードする場合、それは機能せず、最初のページのみがロードされます。

1つの方法はを使用するrel="external"ことですが、携帯電話やタブレットでは見栄えがよくありません...（アニメーションが必要です！）

もっと良い方法はありませんか？jQuery Mobile ajaxナビゲーションを使用して複数ページのテンプレートHTMLを完全にロードするにはどうすればよいですか？

4

2 に答える 2

4

を使用して、プログラムでページをDOMにロードできます。

pageContainerElement.page({ domCache: true });

DOMキャッシュの欠点は、DOMが非常に大きくなり、一部のデバイスで速度低下とメモリの問題が発生する可能性があることです。DOMキャッシュを有効にする場合は、DOMを自分で管理し、さまざまなデバイスで徹底的にテストするように注意してください。

リンクは次のとおりです：http：//jquerymobile.com/test/docs/pages/page-cache.html

更新1

そのコードを別のファイルに配置します。つまりcustom-code.js、jQueryを読み込んだ後、jQueryMobileを読み込む前にヘッダーに配置します。

したがって、ページコンテナが次のようになっている場合：

<div data-role="page" data-theme="a" data-dom-cache="false" class="page blog-post">

div.page({ domCache: true });jQueryとjQuerymobileを取り込むすべてのページの先頭に配置すると、次のようになります。

// Pull in jQuery
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Pull in your custom jQuery Mobile rules/scripts
<script src="../path/to-file/custom-code.js"></script>
// Pull in jQuery Mobile
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

更新2

上記のコードは、その特定のページをキャッシュします。すべてのページをDOMにロードする場合は、custom-code.jsファイル内にこのコードを配置し、DOMにロードする各ページを個別に（ページごとに1つのインスタンス）指定します。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

ページをプリフェッチすると、当然、追加のHTTPリクエストが作成され、帯域幅が使用されるため、この機能は、プリフェッチされたページにアクセスする可能性が高い状況でのみ使用することをお勧めします。

また、現在のページでリンクされているすべてのページをプリフェッチする場合はdata-prefetch、リンクに追加するだけです。

例えば：

<a href="page_2.html" data-prefetch>Link to other page</a>
于 2012-07-23T15:37:33.973 に答える
1

デフォルトでは、jQuerymobileは複数ページのテンプレートのすべてのページをロードしません。ただし、ajaxナビゲーションを使用して複数ページのテンプレートをロードできるjQueryMobile用のプラグインがあります。

ここでjQuery-Mobile-Subpage-Widgetをチェックしてください。

于 2012-07-23T15:25:09.997 に答える