在开发的过程中我们开发的页面可能会非常的长,我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候,header和footer会随着滚动而滚到屏幕外,这时候我们如果想操做header和footer必须再滚动回去。
jquerymobile为我们考虑了这种情况,在这种情况下我们可以点击屏幕,然后消失的header和footer就会出现,再次点击的时候就又会消失。如果我们正在文章的开头,无论我们怎么点击这个header都不会消失,footer在底部一样。代码如下:
在上面的代码中主要是在header和footer中添加了data-position属性,并将其值设置为fixed。这样是达到了我们的效果,但是同样还有一个问题,有时候我们可能在开始和结尾的时候也能全屏查看。这时候我们只需要对上面的代码进行一下改造,修改代码如下即可:<!DOCTYPE html> <html> <head> <title>Fixed Positioning Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"><h1>My Header</h1></div> <div data-role="content"> <p> ..........
</div> <div data-role="footer" data-position="fixed"><h4>My Footer</h4></div> </div> </body> </html>填满超过一个屏幕
<div data-role="page" data-fullscreen="true">