Javascript jQuery Mobile |页面间导航

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

以下是我努力实现的目标。

我有几个HTML页面，每个页面都有自己的css、javascript和JQM页面。我需要的是，当我切换到另一个html文件并使用data rel=“back”在“后退”按钮上执行“后退”操作时，我将恢复到先前html文件的状态。

我尝试使用pagecontainer change函数，但它没有在新加载的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", { });
});

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

$( 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”返回时，先前的状态将恢复

如果没有，那么我如何实现这一点。我的意思是我应该做什么改变

---

谢谢。。非常感谢您的帮助。

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

您应该使用JQM的多页模板，将所有html设置在一个文件中，每个页面位于一个div中，其中包含data role=“page”和特定id：

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

这样，您就可以保持每个页面的状态

JQM文档：

简短回答。。

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

---

细节 启用了Ajax:

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

对于每个HTML，将jQuery、jQM.css和jQM.js放在

head

中

自定义JS应该放在

data role=page

div中

每个

data role=page

div位于单独的HTML文件中

注意：jQM只将每个HTML文件的第一个

数据角色=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，当您使用页面事件时，应该是特定的

禁用Ajax:

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

---

每个HTML文件都有3到4页。大约15个HTML文件。所以不可能将所有页面保存在一个HTML文件中。是的，这就是为什么我不将JQM用于复杂的应用程序。也许您可以集成一个MVC框架，它允许您为每个页面创建一个主html文件和子html文件，这些文件将被添加到主文件中，您可以发布页面状态的屏幕截图。还有一些代码，因为可能有错误。这将有助于了解具体显示的内容，例如列表视图、表单、图片等。