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而不是其他框架，有很大程度是被这种阴影效果所吸引。

提示

本节的范例实际上是经过简化的，但是却不影响直接拿来使用，更多的内容会在后面的项目实战中给出介绍。

上一章目录下一章