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