Question

默认情况下，如果您使用jQuery Mobile的ajax导航来加载多页面模板html文件，它将无法正常工作，只会加载第一页。

一种方法是使用rel="external"，但在手机或平板电脑中效果不佳......（它应该有动画！）

有没有更好的方法？如何使用jQuery Mobile ajax导航完全加载多页面模板html？

Answer 1

您可以使用

以编程方式将页面加载到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>

Answer 2

默认情况下，jQuery mobile不会加载多页模板的所有页面。但jQuery Mobile有a plugin，允许您使用ajax导航加载多页模板。

Check out jQuery-Mobile-Subpage-Widget here.

使用jQuery mobile ajax导航加载多页面模板

2 个答案: