上QQ阅读APP看书，第一时间看更新
5.2 方便的快捷键
上一节连续给出了3个实例，已经将工具栏的基本使用方法讲解得非常透彻了，本节就带领读者更上一层楼。图5-11是一款音乐播放器的界面，其中有一个非常明显的头部栏，在头部栏的左侧有一个“返回”按钮，它的功能是返回之前的界面。
图5-11 工具栏按钮的一个例子
在jQuery Mobile中可以很容易地实现这种布局样式，接下来将在范例5-4中实现，这种效果的方法。
【范例5-4 头部栏中的返回键】
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>--> <! --备用生成APP的JS文件
-->
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="header" data-position="fixed">
14 <a href="#">返回</a> <! --第一个按钮-->
15 <h1>头部栏</h1>
16 <a href="#">设置</a> <! --另一个按钮-->
17 </div>
18 <h1>
19 有按钮的头部栏
20 </h1>
21 <div data-role="footer" data-position="fixed">
22 <h1>尾部栏</h1>
23 </div>
24 </div>
25 </body>
26 </html>
运行结果如图5-12所示。
图5-12 有按钮的头部栏
在图中可以看到头部栏上多了两个按钮，头部栏中的按钮却与真正的按钮有所区别。
首先，在头部栏中使用标签<a>后，标签中的内容会自动转化为按钮的样式（见代码第14行与第16行）。
其次，在头部栏中使用按钮，将会自动与标题等内容排成一行而不是一行一行地显示，这一点是jQuery Mobile非常明智的决定。再深入学习jQuery Mobile后就会发现，jQuery Mobile中的大多数控件都是一个空间占有独立的一行多行排列的，而头部栏按钮却与内容在同一行。
提示
本范例并没有为按钮加入链接，在这种情况下（专指在头部栏中的按钮）会默认被渲染成“返回”键的功能。