jQuery Mobile中的持久标头

Question

无法找到一种方法来为我的旧问题提供赏金,所以我重新发布它,因为它可能是一个错误.

简短版本:我希望PhoneGap + JQM应用程序中的持久标头在页面转换之间保持原位(从不移动),就像页脚可以设计的那样.

长版:首先,我是jQuery和JQM的新手,所以请指出我所犯的任何新错误.

我正在尝试在应用程序中的不同页面之间保留一个标题.当用户在页面之间转换时,它必须像持久的页脚一样保持在原位.使用data-role ="footer"data-id ="(某些一致的id)"data-position ="fixed"来实现持久页脚.它运作得相当好(随机故障,因为它错位,然后在几秒后自动修复).有关我正在寻找的内容的更多信息,请参阅此处的"持久页脚":http: //jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

并在下面的链接中查看持久页脚的示例.了解如何选择页脚中的项目转换为全新页面,但页脚不会移动:http: //jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

现在我正在尝试做同样的事情,但我希望它在应用程序的顶部而不是底部.我尝试过以下的事情:

• 将页脚移动到页面顶部(不知道jQuery中要捕获的标记.尝试使用几个jQuery类的div.(jQuery类),但没有一个工作.我使用FireBug来确定它是"顶级"CSS属性需要改变.

每页上的HTML:

<div data-role="footer" data-position="fixed" data-id="header">
<img src="images/bgheader.png" />
</div>

JavaScript:

$('div.ui-footer').css('top', '0px');
$('div.ui-footer-fixed').css('top', '0px');
$('div.fade').css('top', '0px');
$('div.ui-fixed-overlay').css('top', '0px');
$('div.ui-bar-a').css('top', '0px');

• 使用data-role ="header"(不像页脚那样持久).这个方法将创建我想要的标题(因为我覆盖了一些CSS),但是当我在页面之间转换时,它不会将标题保持在顶部.JQM文档也没有声明它们支持持久标头,而它确实声明它支持持久页脚:

每页上的HTML:

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false">
<img src="images/bgheader.png" />
</div>

Answer 1

检查此示例，位于使页脚和页眉持久化下。