我有一个jQM应用程序,使用标题作为导航栏.我遇到的问题是页面转换(特别是幻灯片)将标题与内容一起移动为一个“页面”.我正在寻找一种方法在页面转换期间保持标头静态.
我检查了API,似乎找不到任何东西.有没有人想出办法来实现这一目标?甚至可以用jQM吗?
任何帮助,将不胜感激!
解决方法
您需要构建自己的标头,该标头不属于< 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 -->
我没有对此进行过测试,但是我为站点范围的菜单做了类似的事情并且效果很好.页面应在标题后面转换,标题应保留在原位.