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

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

---

那么有官方支持的方式吗？我觉得奇怪，似乎只有我一个人在与这个问题作斗争？

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

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

一个有效的例子：

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

$（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”，因为在页面转换期间，只有内容会有动画，页眉和页脚看起来是一样的。另外，JSFIDLE还有一个bug，当你浏览页面时，它们会跳转1-2px。这在实际示例中不会发生。

最简单的方法是在所有页面的页眉和页脚中添加“数据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”修复页眉和页脚

---

希望这能有所帮助。

以下是我如何解决类似问题的：

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

---

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

您的意思是在过渡期间修复它们而不使用动画？或者所有页面都有相同的页眉/页脚？@Omar所有页面都有相同的页眉/页脚。。我希望他们是动画，但这不是一个大问题，如果只有网页本身是动画。这似乎正是我想要避免的那种解决方案。。例如，如果我在页脚中放置一个下拉框，用户在那里进行选择，那么在下一页插入克隆的页脚时，他的选择将丢失。您是正确的，但这里没有一个好的解决方案。您需要在转换之间存储这些数据，并在新页面中再次显示它们。不管你怎么想，这并不是很难解决的复杂问题。相信我，你会浪费更多的时间去寻找你想要的解决方案，然后你就会这样做。目前在jquerymobile1.3.1中，页面小部件不能在apage之外使用。这在jQueryMobile 1.4中是可能的，但您需要等待它的发布。现在我停止使用页面系统，只使用一个页面，通过隐藏/显示div来模拟其他页面。我不得不重新发明轮子，这真是太疯狂了，因为普通的寻呼系统不支持这个。无论如何，谢谢你的帮助@你统治着我！在关于如何做到这一点的100个答案中，你的答案是唯一适合我的！太多了！那太疯狂了。我有一个很大的头球。我需要用js附加它？我会搜索更好的jquery移动替代方案…哇，这对我来说是成功的！与其他解决方案相比非常简单。仅供参考，这适用于页脚，但不适用于页眉。我在jqm1中对此进行了测试。4@Mahendra你能告诉我，你是如何实现的吗？如何将页脚绑定到

？你有一个单独的

footer.html

？@adiga-Nope，我没有把它分开，但是在

页面上使用了相同的页脚代码，似乎只有当所有页面都在同一个文件中时，这才有效？（至少到目前为止对我来说）？这将在每次转换到它没有添加的页面之前添加页眉/页脚。它在移动。是的，在每次过渡之前。这是解决大多数老年退休金标准的简单方法。
        $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
            $("#header").prependTo(ui.toPage);
            $("#control-panel").appendTo(ui.toPage);
        });