如何在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.这不会发生在现实生活中.