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

动态更改 jQuery Mobile 1.4.0 页面的标题 (data-role="header") 和 title () 的正确方法是什么？

添加方法有很多种toolbars（页眉/页脚）动态。此外，jQuery Mobile 1.4 提供internal and external工具栏，这取决于你是否想要一个toolbar对于所有页面，或对于每一页不同的。

如果你想要一个internal工具栏，将其添加到当前页面（活动页面），如果您想要external一、添加到页面容器。另外，您需要增强它，或者使用.toolbar() or .enhanceWithin().

添加后toolbar动态地，你have重置当前页面的高度，因为它们在动态添加时会添加额外的填充。$.mobile.resetActivePageHeight()将删除额外的填充。

这是如何添加的演示header到当前页面。

/* 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 http://jsfiddle.net/Palestinian/hrLc7/

要添加一个external工具栏。

/* 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 http://jsfiddle.net/Palestinian/CVJ78/