jQuery Mobile 1.4.0:动态更改页面的标题和标题 [英] jQuery Mobile 1.4.0: dynamically change header and title of a page

问题描述

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

What is the proper way to dynamically change the header (data-role="header") and title () of a jQuery Mobile 1.4.0 page ?

推荐答案

有很多方法可以动态添加工具栏(页眉/页脚).而且，jQuery Mobile 1.4提供了 internal 和 external 工具栏，这取决于您是否要为所有页面使用一个 toolbar ，还是为每个页面使用一个 toolbar .

There are many ways to add toolbars (header / footer) dynamically. Moreover, jQuery Mobile 1.4 offers internal and external toolbars, it depends whether you want one toolbar for all pages, or different one for each page.

如果要使用内部工具栏，请将其添加到当前页面(活动页面)，如果要使用外部工具栏，请将其添加到 pageContainer .另外，您需要使用.toolbar()或.enhanceWithin()对其进行增强.

If you want an internal toolbar, add it to current page (active page), and if you want an external one, add it to pageContainer. Also, you need to enhance it, either using .toolbar() or .enhanceWithin().

动态添加工具栏后，您必须重置当前页面的高度，因为它们在动态添加时会添加额外的填充. $.mobile.resetActivePageHeight()将删除多余的填充.

After adding toolbar dynamically, you have to reset current page's height as they add extra padding when added dynamically. $.mobile.resetActivePageHeight() will remove extra padding.

这里是演示如何向当前页面添加 header 的示例.

Here is a demo of how to add a header to current page.

/* 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

---

添加外部工具栏.

---

To add an external toolbar.

/* 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

这篇关于jQuery Mobile 1.4.0:动态更改页面的标题和标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！