jQuery 移动版 |页面间导航

Posted 2023-05-08

【中文标题】jQuery 移动版 |页面间导航

【英文标题】：jQuery Mobile | Navigation between Pages

【发布时间】：2014-05-16 13:28:29

【问题描述】：

我是 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" 返回之前的状态时。

如果否，那么我该如何实现。我的意思是我应该做些什么改变..

谢谢.. 非常感谢任何帮助。

【问题讨论】：

可以发布页面状态的屏幕截图。还有一些代码，因为你可能有错误。这将有助于了解确切显示的内容，例如列表视图、表单、图片等。

【参考方案1】：

简短回答..

启用 Ajax

：不，这是不可能的。

Ajax 禁用

：是的，有可能。

---

详情

启用 Ajax：

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

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

注意：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

【参考方案2】：

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

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

【讨论】：

每个 HTML 文件有 3 到 4 页。大约 15 个 HTML 文件。所以不可能将所有页面都保存在一个 HTML 文件中。

是的，这就是我不将 JQM 用于复杂应用程序的原因。也许您可以集成一个 MVC 框架，该框架将允许您为每个页面拥有一个主 html 文件和子 html 文件，这些文件将被引入主文件