jQuery Mobile 1.4.0：动态更改页面的标题和标题

Question

什么是动态更改jQuery Mobile 1.4.0页面的标题（data-role =“header”）和title（）的正确方法？

Answer 1

动态地添加工具栏（页眉/页脚）的方法很多。此外，jQuery Mobile 1.4提供内部和外部工具栏，它取决于你想要一个工具条为所有页面，或为每个页面不同。

如果你想要一个内部工具栏，将它添加到当前页面（活动页面），如果你想要一个外部一个，把它添加到pageContainer。此外，您需要使用.toolbar()或.enhanceWithin()来增强它。

加入工具栏动态后，您有重置当前页面的高度动态添加，当他们增加额外的填充。 $.mobile.resetActivePageHeight()将删除多余的填充。

下面演示了如何将标头添加到当前页面。

/* get active page */ 
var page = $.mobile.pageContainer.pagecontainer("getActivePage"); 

/* add header */ 
$(".add").on("click", function() { 
    $(page).append($("<div/>", { 
     "data-role": "header", 
      "data-position": "fixed" 
    }).append($("<h1/>").text("Header"))).enhanceWithin(); 

    /* reset height */ 
    $.mobile.resetActivePageHeight(); 
}); 

/* change title */ 
$(".change").on("click", function() { 
    $(".ui-header .ui-title").text("new title"); 
}); 

Demo

---

要添加外部工具栏。

/* get pageContainer */ 
var pagecontainer = $.mobile.pageContainer; 

$(".add").on("click", function() { 
    $(pagecontainer).append($("<div/>", { 
     "data-role": "header", 
      "data-position": "fixed", 
      "data-theme": "a" 
    }).append($("<h1/>").text("Header"))).enhanceWithin(); 

    /* reset height */ 
    $.mobile.resetActivePageHeight(); 
}); 

Demo