Question

在我学习JQM时，我发现JQM并不像普通浏览器那样加载页面。它只是获取内容并更新DOM。

当加载请求的页面时，jQuery Mobile会解析该文档具有data-role =＆＃34; page＆＃34;的元素属性并插入该代码进入原始页面的DOM。

我在物理页面和JQM页面之间混合。使用PHP和我的tempalte代码loosk加载页面如下：

include('views/widgets/head.php');
include($view);
include('views/widgets/footer.php');

视图与PHP页面相同。

首页
网址：mysite.com
页数：#frontPage

Page B
网址：mysite.com/page-b
页数：＃listPage，＃infoPage，＃mapPage

Page C
网址：mysite.com/page-c
页数：＃listPage，＃infoPage，＃mapPage

我目前的解决方案是将多页包装在一个容器中：

这可以解释我为什么遇到此代码的问题：

if($('#frontPage').length > 0) { Lib.setTitle('Front Page'); }
if($('#pageB').length > 0) { Lib.setTitle('Page B'); }
if($('#pageC').length > 0) { Lib.setTitle('Page C'); }

每当我导航回我的首页时，似乎第一个语句被触发，然后被触发的最后一个语句覆盖。我知道，因为标题首次设置为＆＃34; Front Page＆＃34;然后由＆＃34; Page C＆＃34;覆盖。

我应该使用像pageload, pagebeforeload, pagebeforeshow这样的事件，但它们太多而且类似于＃34;我不确定使用哪一个。

什么是＆＃34;正确＆＃34;识别我加载哪个页面以便我可以执行正确的功能的方法？
为任何加载的页面执行全局函数的正确代码是什么？

更新
所有自定义JS文件都加载到全局/外部页脚中。

Answer 1

您可以使用pagecontainer小部件之前的活动：http://api.jquerymobile.com/pagecontainer/#event-beforeshow

ui参数的toPage属性返回您要导航到的页面的jQuery对象。然后，您可以检查其ID并显示正确的文本。

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var pageid = ui.toPage.prop("id");

    if(pageid == 'frontPage') { 
        setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', ui.toPage); 
    }

});

function setTitle(text, page){
    page.find(".headerText").text(text);
}

<强> DEMO

每次导航到页面时都会运行，这样您每次都可以显示不同的标题。如果您只显示相同的标题，则可以使用pagecreate事件，因为它只在每个页面最初加载到DOM时运行一次：

$(document).on( "pagecreate", function( e ) {    
    var pageid = e.target.id;    

    if (pageid == 'frontPage') { 
        setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', pageid); 
    }    
});

function setTitle(text, pageid){
    $("#" + pageid).find(".headerText").text(text);
}

<强> DEMO

我怎么知道用jQuery Mobile加载哪个页面？

1 个答案: