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

Question

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

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

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"修复页眉和页脚。

希望这有帮助。