《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15　技巧：优化header和footer以便全屏查看-阿里云开发者社区

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15　技巧：优化header和footer以便全屏查看

2017-05-02 1538

简介： jQuery Mobile提供了一个叫做“全屏模式”的功能。它表示，在默认情况下header和footer是覆盖在content上面的，当点击了content区时，header和footer会消失。如果你在手机上安装了Web应用程序（应用程序间有书签图标）或者当你将自己的Web应用程序与原生的Web应用程序框架（比如Phonegap）集成时，你的应用程序就可以全屏显示：没有浏览器的地址栏、工具栏以及状态栏。

+关注继续查看

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

9.15　技巧：优化header和footer以便全屏查看

jQuery Mobile提供了一个叫做“全屏模式”的功能。它表示，在默认情况下header和footer是覆盖在content上面的，当点击了content区时，header和footer会消失。如果你在手机上安装了Web应用程序（应用程序间有书签图标）或者当你将自己的Web应用程序与原生的Web应用程序框架（比如Phonegap）集成时，你的应用程序就可以全屏显示：没有浏览器的地址栏、工具栏以及状态栏。为了能最佳利用“全屏模式”，如果能完全隐藏自己的header和footer那将是很有用的——不像在先前的示例中，“隐藏”仅仅是表示在页面的下方显示footer。代码清单9-17启用了全屏模式。

代码清单9-17　在content上面显示header和footer，以便全屏查看

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03　　<title>Fullscreen</title> 
04　　<meta name="viewport" 
05　　　 content="width=device-width, initial-scale=1"> 
06　　<link rel="stylesheet" href=
07　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08　　<script type="text/javascript"
09　　　 src="http://code.jquery.com/jquery-1.7.1.min.js">
10　　</script>
11　　<script type="text/javascript" src=
12　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13　　</script>
14 </head> 
15 <body> 
16 
17 <div data-role="page" data-fullscreen="true">
18 
19　 <div data-role="header" data-position="fixed">
20　　 <h1>This is drawn <em>over</em> the content section</h1>
21　 </div>
22 
23　 <div data-role="content">　
24　　 <h1>Header</h1>
25　　 <p>Click to hide the header and footer</p>
26　　 <p>Click again to get them back</p>
27　 </div>
28　 
29　 <div data-role="footer" data-position="fixed">
30　　　　<p>In a long page, this footer would also be drawn over 
31　　　　　 the content section.</p>
32　 </div>
33　 
34 </div>
35 
36 </body>
37 </html>

第17行提供了启用全屏模式的选项。为了能最佳利用全屏模式下页面的剩余区域，引入一些自定义CSS样式还是很有用的。