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

在导航jQueryMobile页面时,有一种简单的方法来保持相同的页眉/页脚吗? 到目前为止我遇到的唯一解决方案依赖于在页面更改时动态地注入它,但是这会破坏过渡,只是克隆元素,我需要原始。

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

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

...
...

您还希望使用css或data-position =“fixed”修复页眉和页脚。

希望这可以帮助。

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

你唯一能做的就是动态注射它们或从头开始使用它们。 在你的情况下,你是在错误的时间做的。 如果要在正确的页面事件期间正确添加页眉和页脚,则需要执行此操作。

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

滑动以更改页面并查看其工作原理(我不想在每个页面上添加按钮)。

 $(document).on('pagebeforecreate', '#article2, #article3', function(){ $('
').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('

Article

').appendTo($(this)); $('
').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('

Article footer

').appendTo($(this)); });

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

注意一个属性’data-id’:’footer’被添加到每个页眉和页脚,因为只有内容会在页面过渡期间生成动画,页眉和页脚看起来会一样。 此外,jsFiddle有一个错误,当你浏览页面时,它们将跳转1-2px。 这不会发生在现实生活中的例子中。

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

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

在浏览jQueryMobile页面时保持相同的页眉/页脚。 在页面更改时动态地注入它,拧紧过渡,但不克隆元素,给出原始元素。