jQuery Mobile |页面之间的导航 [英] jQuery Mobile | Navigation between Pages

问题描述

我在JQM方面相当新，我正尝试使用jQuery Mobile构建移动应用程序。

以下是我正在尝试实现的内容。

我有几个HTML页面，每个页面都有自己的CSS，JavaScript和JQM页面。我需要的是，当我更改为另一个html文件，并使用data-rel =back返回后退按钮时，我将其恢复到之前的HTML文件，并保持状态。

我尝试使用pagecontainer更改函数，但它不会在新加载的html文件上加载javascript。它尝试使用下面的代码。

$ $ $ $ $ $ $ $ $ $ $文档.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时，之前的状态会恢复。

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

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

解决方案简短回答..

• 已启用Ajax ：否，这是不可能的。


• 禁用Ajax ：可以。
  
  
  

  详细信息

  
  
  

  启用了Ajax：
  
  

  在使用单页模型时，您必须确保满足以下几点： 对于每个HTML，将jQuery，jQM.css和jQM.js放置在头部中。 c> data-role = page div。



• 每个 data-role = page HTML文件。



注意：jQM首先加载 data-role = page 将每个HTML文件的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时，如果覆盖CSS in pageZ，它们将被应用在pageX上（如果你使用了相同的选择器）。



为了安全地覆盖不同页面的CSS，创建自定义类和 addClass（） / removeClass（）取决于页面。或者，在覆盖CSS时，使用 #pageID 选择器更具体。这同样适用于JS，当您使用 Page Events 时应该是特定的。


$ b 禁用Ajax：




您可以做任何您想做的事，网站将使用HTTP而不是Ajax。 $ b




演示







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

Below is what i am trying to achieve..

I have few HTML pages with each having its own css, javascript and JQM pages. What i need is when i change to another html file and do back on the back button using data-rel="back" i get restored to the previous html file in the state i left it in.

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", { });
});

Is it achievable in JQM.

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.

解决方案

Short answer..

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

---

Details

Ajax Enabled:

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

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.

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.

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.

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).

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 Disabled:

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

Demo

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