j查询移动版 |页面之间的导航

Question

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

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

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

我尝试使用页面容器更改函数，但它不会在新加载的 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 应该进入div data-role=page。
3. 每个div data-role=page在单独的 HTML 文件中。

注意：jQM 只将每个 HTML 文件的第一个 data-role=pagediv 加载到 DOM 中data-role=page。这就是为什么自定义JS应该放在该div中的原因。

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

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

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

Ajax 禁用：

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

演示

Answer 2

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

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

<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