如何在 jQueryMobile 中跨页面保持相同的页眉/页脚? [英] How to keep same header/footer across pages in jQueryMobile?

问题描述

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

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

解决方案

最简单的方法是为所有页面的页眉和页脚添加data-id"属性.要使页眉/页脚持久化"，请在所有页面中使用相同的数据 ID.

<div data-role="header" data-id="main-header"></div>...<div data-role="footer" data-id="main-footer"></div>
<div id="page2"><div data-role="header" data-id="main-header"></div>...<div data-role="footer" data-id="main-footer"></div>

您还需要使用 css 或 data-position="fixed" 修复页眉和页脚.

希望这会有所帮助.

Is there an easy method to keep the same header/footer while navigating jQueryMobile pages? The only solutions I came across so far relies on injecting it dynamicly on page-change, but this screws up the transitions, and just clones the elements, I need the original.

So is there an officially supported way? I find it strange that I seem the only one struggling with this problem?

解决方案

The easiest way is to add a "data-id" attribute to the headers and footers on all pages. To make the header/footer "persistent", use the same data-id across all pages.

<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>

You'd also want to fix the headers and footers either with css or data-position="fixed".

Hope this helps.

这篇关于如何在 jQueryMobile 中跨页面保持相同的页眉/页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！