- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 2590字
- 2024-10-30 00:11:28
5.1 稍微复杂的页面
在享受jQuery Mobile为开发带来的便利的同时，不知道读者有没有考虑过一个问题，页面中除了page是不是还应该有一点别的东西呢？希望读者能给出肯定的答案。
5.1.1 尝试使用工具栏
无论是网站还是应用，在屏幕的上下两端总有一些固定的栏目，一般被称为顶部栏和尾部栏，也可以叫做头部栏和尾部栏（有些地方也翻译为页眉和页脚）。它们对于一款应用界面的完整性有非常重要的作用。图5-1是在百度图片中找到的一组UI设计，通过观察不难发现，在每一个页面中都存在头部栏和尾部栏。本节将介绍利用jQuery Mobile实现头部栏与尾部栏的方法。
图5-1 一组UI界面
实现该效果的具体代码如范例5-1所示。
【范例5-1 利用jQuery Mobile实现的头部栏和尾部栏】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <! --<script src="cordova.js"></script>-->
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script><! --引入jQuery Mobile需要的脚本
-->
10 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="header"> <! --此处为头部栏-->
14 <h1>头部栏</h1> <! --为头部栏加入标题-->
15 </div>
16 <h1>在页面中加入工具栏</h1>
17 <h1>在页面中加入工具栏</h1>
18 <h1>在页面中加入工具栏</h1>
19 <h1>在页面中加入工具栏</h1>
20 <h1>在页面中加入工具栏</h1>
21 <h1>在页面中加入工具栏</h1>
22 <div data-role="footer"> <! --此处为尾部栏-->
23 <h1>尾部栏</h1> <! --为尾部栏加入标题-->
25 </div>
26 </div>
27 </body>
28 </html>
运行结果如图5-2所示。
图5-2 利用jQuery Mobile实现头部栏与尾部栏图5-3删除范例中重复内容后的页面效果
在范例代码的第16～21行，笔者将同样的内容重复了6遍，可以删除掉页面中重复的内容，然后看一下效果，如图5-3所示。
多次重复同样内容的目的只是为了让其中的内容正好填满整个屏幕，以使页面看上去比较符合用户的审美标准。如果将这部分重复的内容去掉，或是再多重复几遍使页面内容超出屏幕范围，则会出现不完美的结果。读者可以尝试将第16～21行的内容再重复几遍，然后看看显示的效果，如图5-4和图5-5所示。
图5-4 页面内容超出屏幕范围时仅显示头部栏
图5-5 头部栏看不到了
当页面内容超出屏幕范围时，屏幕中仅能显示页面中的一部分内容，和传统的Web页面一样，jQueryMobile也是默认先显示页面的顶端部分。因此在图5-4中仅显示了头部栏和一部分页面内容。也可以通过拖拽的方式看到页面底部被隐藏的内容（这里的隐藏指的是由于超出屏幕范围而没有被显示的部分）。如图5-5中，可以想象到头部栏应该位于屏幕上方看不见的地方，而屏幕下方则显示出尾部栏。
如果在PC上测试该程序，当用浏览器打开一个页面时，浏览器上会显示出标题“头部栏”，但代码中并不存在title标签，读者可以考虑一下这是什么原因。
提示
一般情况下，jQuery Mobile会默认将头部栏中的内容作为页面的标题使用。
5.1.2 让工具栏固定
上一小节介绍了jQuery Mobile的重要控件——工具栏，但是范例5-1的定位方式显然让用户很不习惯。毕竟手机应用的工具栏大多是固定的，而越来越多的Web应用也开始使用浮动条的方式让导航悬浮在一个固定的位置。各位现在可以打开手机，找到浏览器（不管是什么浏览器），这里使用的是UC浏览器，如图5-6所示。
图5-6 UC浏览器的界面
可以看到选项卡的标题有“书签”和“历史”，它们可以看作是浏览器的头部栏，它被牢牢地固定在屏幕上方，而尾部栏则固定在屏幕的底部，它们中间的控件才是页面的主要内容。这样的界面才是APP用户所喜爱的，但在上一小节的范例中，显然jQuery Mobile没有实现这样的效果。事实上，利用jQuery Mobile让它们固定在屏幕的头部和底部是一件非常轻松的事情。具体做法如范例5-2所示。
【范例5-2 让工具栏位置固定】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <! --<script src="cordova.js"></script>--><! --使用PhoneGap生成APP使用-->
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script> <! --引入jQuery脚本-->
09 <script src="jquery.mobile.min.js"></script> <! --引入jQuery Mobile脚本
-->
10 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="header" data-position="fixed"><! --设置头部栏为“固定”
-->
14 <h1>头部栏</h1>
15 </div>
16 <h1>在页面中加入工具栏</h1>
17 <h1>在页面中加入工具栏</h1>
18 <h1>在页面中加入工具栏</h1>
19 <h1>在页面中加入工具栏</h1>
20 <h1>在页面中加入工具栏</h1>
21 <h1>在页面中加入工具栏</h1>
22 <h1>在页面中加入工具栏</h1>
23 <h1>在页面中加入工具栏</h1>
24 <h1>在页面中加入工具栏</h1>
25 <h1>在页面中加入工具栏</h1>
26 <h1>在页面中加入工具栏</h1>
27 <h1>在页面中加入工具栏</h1>
28 <div data-role="footer" data-position="fixed"><! --设置尾部栏为“固定”
-->
29 <h1>尾部栏</h1>
30 </div>
31 </div>
32 </body>
33 </html>
保存后，运行效果如图5-7所示。
图5-7 固定位置的工具栏
可以看出，页面中不断重复的内容所占的面积已经超出了屏幕所能显示的范围。按照常理，当头部栏被显示的时候，尾部栏应当在屏幕之外，无法看到，可是从图5-7中可以清楚地看出，头部栏和尾部栏整齐地位于屏幕的顶部和底部，页面内容则位于它们之间。
提示
图5-7的右侧可以看到一个滚动条，这对页面整体的美观造成了一定的影响，实际上页面侧面的滚动条只是在PC端浏览器上会很明显，在手机浏览器上对视觉的影响几乎可以忽略。读者可以在自己的手机上打开一个网页来进行验证。
可以再尝试将代码第16～27行重复的部分去掉，只留下一行文字，使页面留下大量的空白，运行结果如图5-8所示。
图5-8 页面大量留空后工具栏依然固定
从图5-8不难看出，在页面存在大量空白的情况下，尾部栏顶端与页面内容底部的空白被自动填充了相应主题的背景色。这下可以确认工具栏确实是被固定在屏幕中了。
这样的效果是怎样实现的呢？观察代码第13行和第28行，可以看到在头部栏与尾部栏的标签上多出了一组属性data-position=" fixed "。只经过这项简单的设置就可以让工具栏固定在令人赏心悦目的位置。
提示
笔者在最初学习使用这一属性时，尝试了许多次都没有成功让工具栏位置固定。原因是当时在国内某个小型下载站上下载的jQuery Mobile插件，而这款插件大概是被人为修改过的。在此提醒读者在下载各种插件时（不仅仅是jQuery Mobile），一定要尽可能地从官方网站下载，或者尽量从一些大型网站下载。
5.1.3 一次无聊的实验
就在刚刚，笔者突然想到了一件非常无聊的事情，如果把头部栏和尾部栏的位置调换一下会发生什么事情？于是就有了范例5-3。
【范例5-3 调换头部栏与尾部栏的位置】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
<! --设置页面显示-->
06 <! --<script src="cordova.js"></script>--> <! --为PhoneGap生成APP备用-->
07 <link rel="stylesheet" href="jquery.mobile.min.css" /> <! --引入jQuery
Mobile样式文件-->
08 <script src="jquery-2.1.4.min.js"></script> <! --引入jQuery脚本-->
09 <script src="jquery.mobile.min.js"></script> <! --引入jQuery Mobile脚本
-->
10 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="footer" data-position="fixed"><! --注意！这个是尾部栏
-->
14 <h1>尾部栏</h1> <! --加入标题便于区分-->
15 </div>
16 <h1>在页面中加入工具栏</h1>
17 <h1>在页面中加入工具栏</h1>
18 <h1>在页面中加入工具栏</h1>
19 <h1>在页面中加入工具栏</h1>
20 <h1>在页面中加入工具栏</h1>
21 <h1>在页面中加入工具栏</h1>
22 <h1>在页面中加入工具栏</h1>
23 <h1>在页面中加入工具栏</h1>
24 <h1>在页面中加入工具栏</h1>
25 <h1>在页面中加入工具栏</h1>
26 <h1>在页面中加入工具栏</h1>
27 <h1>在页面中加入工具栏</h1>
28 <div data-role="header" data-position="fixed"><! --这个才是头部栏
-->
29 <h1>头部栏</h1> <! --同样要加入标注-->
30 </div>
31 </div>
32 </body>
33 </html>
运行结果如图5-9所示。
图5-9 调换头部栏和尾部栏的位置
可以清楚地看到，头部栏依然固定在屏幕的顶端，尾部栏依然固定在屏幕的底端，没有发生位置相互颠倒的现象。这是为什么呢？大概是因为jQuery Mobile是根据CSS的样式对控件进行渲染的，那么问题是不是出在CSS上？打开jQuery Mobile的CSS文件看一下，文件内容如图5-10所示。
图5-10 jQuery Mobile中的一部分代码
代码第一句．ui-header-fixed, .ui-footer-fixed{left:0; right:0; width:100%; position:fixed; z-index:1000}，表示当头部栏和尾部栏的data-position属性为fixed时，定位方式为自适应，同时z-index值为1000，这就保证了头部栏和尾部栏最终一定能浮于页面中其他控件上方。同时可以看出头部栏使用了属性top:0或top:-1px; padding-top:1px，本质上都是让头部栏紧贴屏幕最顶端的位置。footer元素也有类似的设计，只不过是将top换成了bottom，至于其他的样式读者可以自己试着去分析。
提示
可以通过修改CSS样式来设置其他的工具栏。
实验结束，笔者将它定义为一次无聊的实验，但是却让笔者对工具栏的理解更加深刻了，并最终得出这个实验的结论：jQuery Mobile工具栏的位置与代码中的位置无关。