jQuery 移动 |页面间导航 [英] jQuery Mobile | Navigation between Pages

问题描述

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

I am fairly new at JQM and i am trying to build mobile application using jQuery Mobile.

以下是我想要实现的目标..

我有几个 HTML 页面，每个页面都有自己的 css、javascript 和 JQM 页面.我需要的是，当我更改为另一个 html 文件并使用 data-rel="back" 返回后退按钮时，我会恢复到之前的 html 文件处于我离开的状态.

我尝试使用 pagecontainer 更改功能，但它不会在新加载的 html 文件上加载 javascript.它尝试使用以下代码.

I tried using pagecontainer change function, but it does not load javascript on the new loaded html file. It tried using the following code.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("change", "tutorial.html", { 
        reload : true
    });
});

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

Also i tried another option which was pagecontainer load but this time its not even redirecting. I used the following code.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("load", "tutorial.html", { });
});

是否可以在 JQM 中实现.

Is it achievable in JQM.

如果是，那么我如何导航到另一个 html 文件，以便加载头部中的 javascript 和 css.当我使用 data-rel="back" 返回时，之前的状态会恢复.

If Yes then how do i navigate to the other html file so that its javascript and css in the head get loaded. And when i go back using data-rel="back" the previous state is restored.

如果否，那么我如何实现这一目标.我的意思是我应该做出什么改变..

If No then how do i achieve this. I mean what changes should i make..

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

Thanks.. Much appreciate any help.

推荐答案

简答..

• Ajax 已启用:不，这是不可能的.
• Ajax 禁用:是的，这是可能的.

Short answer..

• Ajax Enabled : No, it is not possible.
• Ajax Disabled: Yes, it is possible.

启用 Ajax:

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

When you use Single Page Model, you have to make sure that you fulfill the below points:

1. 对于每个 HTML，将 jQuery、jQM.css 和 jQM.js 放在 head 中.
2. 自定义 JS 应该放在 data-role=page div 中.
3. 每个 data-role=page div 在一个单独的 HTML 文件中.
1. For each HTML, place jQuery, jQM.css and jQM.js in head.
2. Custom JS should go inside data-role=page div.
3. Each data-role=page div in a separate HTML file.

注意:jQM 只将每个 HTML 文件的第一个 data-role=page div 加载到 DOM 中.data-role=page div 之外的任何内容都将被忽略.这就是为什么自定义 JS 应该放在那个 div 中.

Note: jQM loads ONLY first data-role=page div of each HTML file into DOM. Anything outside data-role=page div is neglected. That's why Custom JS should be placed inside that div.

当您离开页面(加载的第一页除外)时，jQuery Mobile 会从 DOM 中删除该页面.除非您通过将 data-dom-cache="true" 添加到 data-role=page div 来缓存它.该页面已从 DOM 中删除，但是，CSS 和 JS 被缓存.要删除它们，您需要完全刷新/重新加载页面.

When you navigate away from a page (except very first page loaded) jQuery Mobile removes that page from DOM. Unless you cache it by adding data-dom-cache="true" to data-role=page div. The page is removed from DOM, however, CSS and JS are cached. To remove them, you need to refresh/reload the page completely.

因此，当您通过 Ajax 从 pageX.html 导航到 pageY.html 时，如果您覆盖 pageZ 中的 CSS，它们将应用于 pageX(如果您使用相同的选择器).

Hence, when you navigate from pageX.html to pageY.html via Ajax, if you override CSS in pageZ, they will be applied on pageX (in case you used same selectors).

要安全地覆盖不同页面的 CSS，请根据页面创建自定义类和 addClass()/removeClass().或者，在覆盖 CSS 时使用 #pageID 选择器更具体.这同样适用于 JS，你应该在使用 Page Events 时具体.

To safely override CSS of different pages, create custom classes and addClass() / removeClass() depending on page. Or, use #pageID selector to be more specific when you override CSS. The same applies for JS, you should be specific when you use Page Events.

禁用 Ajax:

您可以为所欲为，该网站将使用 HTTP 而不是 Ajax.

You can do whatever you want, the website will be using HTTP not Ajax.

演示

这篇关于jQuery 移动 |页面间导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！