jQuery Mobile |页面之间的导航

我在JQM相当新，我正在尝试使用jQuery Mobile构建移动应用程序。jQuery Mobile |页面之间的导航

下面是我想实现..

我有每个有它自己的CSS一些HTML页面，JavaScript和JQM页面。我需要的是，当我改变到另一个HTML文件，并使用data-rel =“back”返回后退按钮时，我恢复到之前的状态中的HTML文件，我离开它。

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

$(document).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”时，之前的状态被恢复。

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

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

来源

2014-04-04 planet260

可以发表你的页面的状态的屏幕截图。还有一些代码，因为你可能有错误。这将有助于了解究竟显示的是什么，例如列表视图，表单，图片等。 – Tasos

简短的回答..

支持AJAX：不，这是不可能的。
阿贾克斯禁用：是的，这是可能的。

详细

支持AJAX：

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

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

注意：JQM只加载第一data-role=page DIV每个HTML文件到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，当您使用页面事件时，您应该具体。

阿贾克斯禁用：

你可以做任何你想要的，该网站将使用HTTP不是阿贾克斯。

Demo

来源

2014-04-04 10:37:41 Omar

谢谢男人..这真的很有帮助.. – planet260

不客气@ planet260 :) – Omar

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

您应该使用JQM的多页面模板，每个页面与数据角色=“页面”和特定ID的DIV设置所有的HTML在一个文件中：

<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-04 10:21:49 Finrod

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

是的，这就是为什么我不使用JQM的复杂应用程序。也许你可以整合一个MVC框架，这将允许你有一个主要的html文件和每个页面的子html文件，这将在主文件 – Finrod

jQuery Mobile |页面之间的导航

回答

简短的回答..

详细

相关问题