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页面时保持相同的页眉/页脚。在页面更改时动态注入它，拧紧过渡，但不克隆元素，给出原始。

如何在jQueryMobile中的页面之间保持相同的页眉/页脚？

3 个答案: