简短版本:我希望在一个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 -->