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：

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

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

注意：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设置在一个文件中，每个页面都在div中，并带有data-role =＆＃34; page＆＃34;和具体的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

jQuery Mobile |页面之间的导航

2 个答案:

简短回答..

详细