jQuery Mobile静态标题 [英] jQuery Mobile Static Headers
问题描述
我有一个使用标题作为导航栏的jQM应用程序.我遇到的问题是页面过渡(特别是幻灯片)将标题和内容一起移动为一个页面".我正在寻找一种在页面转换过程中保持标题静态的方法.
I have a jQM application that uses the header as a navigation bar. The problem I'm having is that the page transitions (specifically slide) move the header along with the content as one "page". I'm looking for a way to keep the header static during page transitions.
我已经检查了API，但似乎找不到任何东西.有没有人想办法做到这一点? jQM甚至有可能吗?
I've checked the API and can't seem to find anything. Has anyone figured out a way to accomplish this? Is it even possible with jQM?
任何帮助将不胜感激！
推荐答案
您将需要构建自己的标头，该标头不属于<div data-role="page">元素.通常，您将页眉/页脚添加为<div data-role="page">元素的子级，但这会使它们与页面的其余部分过渡.
You will need to build your own header that is not part of a <div data-role="page"> element. Generally you add your header/footer as a child of the <div data-role="page"> element but that makes them transition with the rest of the page.
要从转换中删除标题，您可以将自定义标题完全放在页面顶部，然后在data-role="content" div元素中添加填充，以使标题不会隐藏任何内容.
To remove the header from transitions you can absolutely position your custom header at the top of the page and then add padding to the data-role="content" div elements so the header does not hide any content.
<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 -->
我还没有测试过，但是我对站点范围的菜单做了类似的操作，效果很好.页面应在页眉后面过渡，并且页眉应留在原处.
I haven't tested this but I do something similar for site-wide menus and it works great. The pages should transition behind the header and the header should stay in-place.
这篇关于jQuery Mobile静态标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
