jquery - 如何在 jQueryMobile 中跨页面保持相同的页眉/页脚？

Question

在浏览 jQueryMobile 页面时，是否有一种简单的方法可以保持相同的页眉/页脚？到目前为止，我遇到的唯一解决方案依赖于在页面更改时动态注入它，但这会破坏过渡，并且只是克隆元素，我需要原始元素。

那么有官方支持的方式吗？我觉得奇怪的是我似乎是唯一一个在这个问题上苦苦挣扎的人？

Answer 1

最简单的方法是在所有页面的页眉和页脚中添加“data-id”属性。要使页眉/页脚“持久化”，请在所有页面中使用相同的数据 ID。

<div id="page1">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

<div id="page2">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

您还想使用 css 或 data-position="fixed" 来修复页眉和页脚。

希望这可以帮助。

Answer 2

不存在针对您的问题的内置解决方案。jQuery Mobile 没有在加载的页面之间共享页眉和页脚的解决方案。

您唯一能做的就是动态注入它们或从一开始就拥有它们。在您的情况下，您在错误的时间这样做。如果要正确添加页眉和页脚，则需要在正确的页面事件期间进行。

一个工作示例：http: //jsfiddle.net/Gajotres/xwrqn/

滑动以更改页面并查看它是如何工作的（我不想费心在每个页面上添加按钮）。

$(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this));
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));    
});

如果您在 pagebeforecreate 期间执行此操作，则仅在第一次创建页面时触发一次。将添加动态内容，因为 pagebeforecreate 在增强内容标记之前触发，您无需担心页眉和页脚样式。

注意添加到每个页眉和页脚的属性 'data-id':'footer'，因为它只有内容会在页面转换期间进行动画处理，页眉和页脚看起来相同。此外，jsFiddle 有一个错误，当您滑动页面时，它们会跳转 1-2px。这不会发生在现实生活中的例子中。

Answer 3

以下是我解决类似问题的方法：

        $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
            $("#header").prependTo(ui.toPage);
            $("#control-panel").appendTo(ui.toPage);
        });

在浏览 jQueryMobile 页面时保持相同的页眉/页脚。在页面更改时动态注入它，搞砸过渡，但不克隆元素，提供原始元素。