jQuery 移动版 |页面间导航

Question

我是 JQM 的新手，我正在尝试使用 jQuery Mobile 构建移动应用程序。

以下是我想要实现的目标..

我的 HTML 页面很少，每个页面都有自己的 css、javascript 和 JQM 页面。我需要的是，当我更改为另一个 html 文件并使用 data-rel="back" 回到后退按钮时，我会恢复到之前的 html 文件处于我离开它的状态。

我尝试使用 pagecontainer 更改功能，但它不会在新加载的 html 文件上加载 javascript。它尝试使用以下代码。

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("change", "tutorial.html", { 
        reload : true
    });
});

我还尝试了另一个选项，即页面容器加载，但这次它甚至没有重定向。我使用了以下代码。

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("load", "tutorial.html", { });
});

在 JQM 中是否可以实现。

如果是，那么我如何导航到另一个 html 文件，以便加载头部中的 javascript 和 css。当我使用 data-rel="back" 返回之前的状态时。

如果否，那么我该如何实现。我的意思是我应该做些什么改变..

谢谢.. 非常感谢任何帮助。

Answer 1

简短回答..

• 启用 Ajax：不，这是不可能的。
• Ajax 禁用：是的，有可能。

---

详情

启用 Ajax：

当您使用单页模型时，您必须确保满足以下几点：

1. 对于每个 HTML，将 jQuery、jQM.css 和 jQM.js 放入 head。
2. 自定义 JS 应该放在 data-role=page div 中。
3. 每个data-role=page div 都在一个单独的 HTML 文件中。

注意：jQM 仅将每个 HTML 文件的第一个 data-role=page div 加载到 DOM 中。 data-role=page div 之外的任何内容都将被忽略。这就是为什么 Custom JS 应该放在那个 div 里面。

当您离开一个页面（除了加载的第一页）jQuery Mobile 会从 DOM 中删除该页面。除非您通过将data-dom-cache="true" 添加到data-role=page div 来缓存它。该页面已从 DOM 中删除，但 CSS 和 JS 被缓存。要删除它们，您需要完全刷新/重新加载页面。

因此，当您通过 Ajax 从 pageX.html 导航到 pageY.html 时，如果您在 pageZ 中覆盖 CSS，它们将应用于 pageX（如果您使用相同的选择器）。

要安全地覆盖不同页面的 CSS，请根据页面创建自定义类和 addClass() / removeClass()。或者，当您覆盖 CSS 时，使用 #pageID 选择器更具体。这同样适用于 JS，你应该在使用 Page Events 时具体。

Ajax 已禁用：

你可以做任何你想做的事，网站将使用 HTTP 而不是 Ajax。

Demo

Answer 2

不确定是否可以使用几个 html 文件恢复以前的状态。

您应该使用 JQM 的多页模板，并将您的所有 html 设置在一个文件中，每个页面在一个具有 data-role="page" 和特定 id 的 div 中：

<div data-role="page" id="foo">
</div>
<div data-role="page" id="bar">
</div>

这样，您将能够保持每个页面的状态。

JQM 文档：http://demos.jquerymobile.com/1.4.2/pages/#Multi-pagetemplatestructure