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

Question

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

Answer 1

有很多方法可以动态添加工具栏（页眉/页脚）。此外，jQuery Mobile 1.4提供了内部和外部工具栏，它取决于您是希望所有页面都有一个工具栏，还是每个页面都需要一个工具栏。

如果您需要内部工具栏，请将其添加到当前页面（活动页面），如果您需要外部，请将其添加到 pageContainer < / em>的。此外，您需要使用.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