javascript – jQuery Mobile |页面之间的导航

我是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
    });
});

此外,我尝试了另一个选项,即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放在头部.
>自定义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-role = page div添加data-dom-cache =“true”来缓存它.页面将从DOM中删除,但CSS和JS将被缓存.要删除它们,您需要完全刷新/重新加载页面.

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

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

Ajax禁用:

你可以随心所欲,网站将使用HTTP而不是Ajax.

07000

https://stackoverflow.com/questions/22859314/jquery-mobile-navigation-between-pages

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – jQuery Mobile |页面之间的导航