2

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.

4

2 回答 2

2

简短的回答..

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

细节

启用 Ajax：

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

  1. 对于每个 HTML，将 jQuery、jQM.css 和 jQM.js 放在head.
  2. 自定义 JS 应该放在data-role=pagediv 里面。
  3. 每个data-role=pagediv 在一个单独的 HTML 文件中。

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

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

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

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

阿贾克斯禁用：

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

演示

于 2014-04-04T10:37:41.277 回答
1

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

您应该使用 JQM 的多页模板，并将所有 html 设置在一个文件中，每个页面在一个 div 中，带有 data-role="page" 和特定 id ：

<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

于 2014-04-04T10:21:49.880 回答