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

【问题标题】：jQuery Mobile 1.4.0: dynamically change header and title of a pagejQuery Mobile 1.4.0：动态更改页面的标题和标题
【发布时间】：2014-01-15 22:04:04
【问题描述】：

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

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

有很多方法可以动态添加工具栏（页眉/页脚）。此外，jQuery Mobile 1.4 提供了 internal 和 external 工具栏，这取决于您是希望所有页面都使用一个 toolbar，还是每个页面使用不同的工具栏。

如果你想要一个 internal 工具栏，把它添加到当前页面（活动页面），如果你想要一个 external 工具栏，把它添加到 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

【讨论】：

非常感谢您的广泛回答。如果只需要更改标题本身（只是标题中 h1 标记的内容），您能否解释一下该怎么做？我尝试更改 h1 的文本，这可以在标题上完成工作，但不会更改 jqm 似乎自动注入的标题内容。
@materialdreams 不客气。要仅更改标题，请使用此 $(".ui-header .ui-title").text("new title");。它在第一个代码块和演示中进行了解释。
再次感谢。请问在jqm文档中哪里可以找到这种信息？
@materialdreams adding headers dynamically。更改标题的标题，文档中未提及。