4

默认情况下，如果您使用 jQuery Mobile 的 ajax 导航来加载多页模板 html 文件，它不起作用，只会加载第一页。

一种方法是使用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 之后但在加载 jQuery Mobile 之前将其放入标题中。

因此，如果您的页面容器如下所示：

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

你可以把div.page({ domCache: true });然后放在你拉入 jQuery 和 jQuery mobile 的所有页面的头部，它看起来像这样：

// 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 中的每个页面：

$.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

默认情况下，jQuery mobile 不会加载多页模板的所有页面。但是有一个用于 jQuery Mobile 的插件，它允许您使用 ajax 导航加载多页模板。

在这里查看 jQuery-Mobile-Subpage-Widget。

于 2012-07-23T15:25:09.997 回答