上QQ阅读APP看书，第一时间看更新
6.1 简单按钮的使用
按钮是页面上非常重要的元素，尽管如今的手机应用已经加入了触控手势等更加高级的操作方式，但按钮的重要性却依然难以取代。
笔者曾经开发过一款DOTA攻略类的应用（现在看来也许LOL更能吸引读者），在这里拿出来是因为这款应用的主界面除一个头部栏之外，仅用8个按钮就达到了不错的视觉效果。范例6-1是实现这一界面的代码。
【范例6-1 利用按钮实现的界面】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title> DOTA资料大全</title> <! --标题可不要
-->
06 <meta name="viewport" content="width=device-width, initial-scale=1">
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>
10 <! --此处是引用的来自网络的js文件和CSS样式，因此不需要考虑图标的问题-->
11 </head>
12 <body>
13 <div data-role="page" data-theme="a">
14 <div data-role="header">
15 <h1 >DOTA资料大全</h1>
16 </div>
17 <div data-role="content">
18 <a href="#" data-role="button">英雄简介</a> <! --按钮的使用-->
19 <a href="#" data-role="button">物品资料</a> <! --两个按钮之间
会自动保持一定间距-->
20 <a href="#" data-role="button">经典出装</a>
21 <a href="#" data-role="button">野怪资料</a>
22 <a href="#" data-role="button">教学视频</a>
23 <a href="#" data-role="button">经典解说</a>
24 <a href="#" data-role="button">明星专访</a>
25 <a href="#" data-role="button">关于作者</a>
26 <! --尽量安排最底部的按钮留有一定的空隙-->
27 </div>
28 </div>
29 </body>
30 </html>
运行结果如图6-1所示。
图6-1 利用按钮实现的界面
代码第17行是使用按钮的一种最基本的方法，除要使用标签<a>之外，还要为按钮加入属性data-role="button"，只有这样才能将元素渲染为按钮的样式。在标签之间的内容（如“英雄简介”）会显示为按钮的标题。另外，在默认情况下，一个按钮会单独占用一行，因此按钮看上去比较长。
在图6-1中，内容为“物品资料”的按钮在样式上明显与其他按钮不同，因为笔者在截图时特意截取了按钮被按下时的样式。jQuery Mobile默认会为按钮加入被按下时的阴影效果，笔者当初选择jQuery Mobile而不是其他框架，有很大程度是被这种阴影效果所吸引。
提示
本节的范例实际上是经过简化的，但是却不影响直接拿来使用，更多的内容会在后面的项目实战中给出介绍。