javascript - 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 之外的任何内容都将被忽略。这就是为什么自定义 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。

Demo