简短版本：我希望在一个PhoneGap JQM应用程序中保持一个持久性的头部,保持在页面转换之间就位(从不移动),如页脚可以设计的.
长版本：首先,我完全是jQuery和JQM的新手,所以请指出我所犯的任何新错误.
我试图获得在应用程序中不同页面之间持续存在的标题.当用户在页面之间转换时,它必须像持续的页脚保持原样.持久性页脚使用data-role =“footer”data-id =“(一些一致的id)”data-position =“fixed”来实现.它工作得很好(随机错误,随后会错位,然后几秒钟后自动固定).有关我正在寻找的更多信息,请参阅“Persistent Footer”：
http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html
并在下面的链接中看到持续页脚的例子.查看如何选择页脚中的一个项目转换到一个全新的页面,但页脚不会移动：
http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html
现在我试图做同样的事情,但我希望它在应用程序的顶部而不是底部.我尝试了以下几点：
>将页脚移到页面顶部(不知道在jQuery中捕捉到什么标签)Tried div(jQuery class)利用几个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>
解决方法
<script type="text/javascript">
$(document).ready(function() {
$('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active
firstContent=$('#content1'); //defining selectors
secondContent=$('#content2');
secondContent.hide(); //hide the second content division
});
// show only the first content div
function showContent1() {
firstContent.show();
secondContent.hide();
}
function showContent2() {
firstContent.hide();
secondContent.show();
}
//clicking on tab 2
$('#lpage2').live('tap',function(event){
//alert("click");
showContent2();
});
</script>
<body>
<!-- Start of first page -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>Foo</h1>
<div data-role="navbar">
<ul>
<li><a href="#" id="lpage1" data-transition="pop">Home<br/> </a></li>
<li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<!-- page1 -->
<div data-role="content" id="content1">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<!-- page2 -->
<div data-role="content" id="content2">
<p>I'm second in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->