在浏览 jQueryMobile 页面时，是否有一种简单的方法可以保持相同的页眉/页脚？到目前为止，我遇到的唯一解决方案是在页面更改时动态注入它，但这会破坏过渡，并且只是克隆元素，我需要原始元素。
那么有官方支持的方式吗？我觉得奇怪的是我似乎是唯一一个在这个问题上苦苦挣扎的人？
【问题讨论】：
标签： jquery jquery-mobile layout footer
不存在针对您的问题的内置解决方案。 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。这在现实生活中不会发生。
【讨论】：
最简单的方法是在所有页面的页眉和页脚中添加“data-id”属性。要使页眉/页脚“持久化”，请在所有页面中使用相同的 data-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" 来修复页眉和页脚。
希望这会有所帮助。
【讨论】：
<div data-role="footer"></div>？你有单独的footer.html吗？
page 中使用了相同的页脚代码
这是我解决类似问题的方法：
$(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
$("#header").prependTo(ui.toPage);
$("#control-panel").appendTo(ui.toPage);
});
在浏览 jQueryMobile 页面时保持相同的页眉/页脚。在页面更改时动态注入，搞砸过渡，但不克隆元素，提供原始元素。
【讨论】：