jQuery移动静态标题

dSq*_*red 6 jquery jquery-mobile

我有一个jQM应用程序,使用标题作为导航栏.我遇到的问题是页面转换(特别是幻灯片)将标题与内容一起移动为一个"页面".我正在寻找一种方法在页面转换期间保持标头静态.

我检查了API,似乎找不到任何东西.有没有人想出办法来实现这一目标?甚至可以用jQM吗?

任何帮助,将不胜感激!

Jas*_*per 8

您将需要构建自己的不属于<div data-role="page">元素的标头.通常,您将页眉/页脚添加为<div data-role="page">元素的子元素,但这会使它们与页面的其余部分一起转换.

要从转换中删除标题,您可以将自定义标题放在页面顶部,然后将填充添加到data-role="content"div元素,这样标题不会隐藏任何内容.

<style>
#my_header {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 50px;
    z-index  : 1000;
    overflow : hidden;
}
[data-role="content"] {
    padding-top : 50px;
}
</style>
<body>
    <div data-role="page">...</div>
    <div id="my_header">...</div>
</body>
<!-- Notice the header div is not nested within any data-role="page" divs -->
Run Code Online (Sandbox Code Playgroud)

我没有对此进行过测试,但是我为站点范围的菜单做了类似的事情并且效果很好.页面应在标题后面转换,标题应保留在原位.