jQuery Mobile | 页面间导航

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
    });
});

我也尝试了另一个选项，它是pagecontainer加载，但是这次它甚至没有重定向。 我用下面的代码。

$( 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一个data-role=page div加载到DOM中。 忽略data-role=page div之外的任何内容。 这就是为什么自定义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。

演示

Answer 2

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

您应该使用JQM的多页模板，并将所有html设置在一个文件中，并且每个页面都在div中具有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