6.3 更加个性化的显示图标

上一节展示了怎样在按钮中显示图标，虽然链接在尾部栏中可以默认显示为按钮，但那却并不是真正的按钮。那么本节从基础开始讲解按钮的一般用法。

首先，准备一个文件index.html，按照范例进行编写。

【范例6-3 17 种默认图标的显示】

        01    <! DOCTYPE html>
        02
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        05   <title> 17种默认图标</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    </head>
        11    <body>
        12         <div data-role="page">
        13               <div data-role="content">
        14                  <a href="#" data-role="button" data-icon="arrow-l">左箭头</a>
        15                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "arrow-r">右箭头</a>
        16                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "arrow-u">上箭头</a>
        17                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "arrow-d">下箭头</a>
        18                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "delete">删除</a>
        19                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "plus">添加</a>
        20                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "minus">减少</a>
        21                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "check">检查</a>
        22                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "gear">齿轮</a>
        23                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "forward">前进</a>
        24                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "back">后退</a>
        25                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "grid">网格</a>
        26                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "star">五角星</a>
        27                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "alert">警告</a>
        28                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "info">信息</a>
        29                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "home">首页</a>
        30                    <a href="#" data-role="button" data-iconpos="left" data-icon=
    "search">搜索</a>
        31               </div>
        32        </div>
        33    </body>
        34    </html>

范例运行效果如图6-4和图6-5所示，由于一次要显示17个按钮，屏幕的尺寸不足，所以不得不将页面上的内容分割成两幅图来显示它们。通过对这两幅图的观察，还可以复习上一节介绍过的17种默认按钮的样式。

图6-4 按钮图标显示在按钮左侧1

图6-5 按钮图标显示在按钮左侧2

仔细观察代码第14和第15行，找出它们的不同之处。可以发现第15行中加入了属性data-iconpos而第14行没有。这里可以根据单词iconpos推测出，该属性的作用是设置图标显示的位置，但是在图中发现这两个按钮图标显示的位置并没有什么区别，于是就可以推测出在jQuery Mobile中按钮图标是默认显示在按钮左侧的。

再与第6.2节中的图6-2进行一些对比可以发现，本范例中的图标都是显示在按钮左侧的，而在图6-2中的按钮都是显示在按钮顶端的。范例6-2中并没有用到设置图标位置的属性，这当然是jQuery Mobile设计的结果，使按钮图标在不同的状态下会默认显示在某个位置。比如，导航栏中的按钮图标默认是显示在按钮顶端的，而一般按钮的图标则默认显示在按钮的左侧。

虽然jQuery Mobile的开发者设置了按钮图标默认应该显示的位置，但是他们保留了对使用者的尊重，所以留下了相应的属性，开发者可以通过设置这些属性来修改图标显示的位置。

可以将范例6-3中的data-iconpos属性分别设置为right、top和bottom，使按钮图标分别显示在按钮的右侧、上方和下方，运行结果分别如图6-6、图6-7和图6-8所示。

图6-6 按钮图标显示在按钮右侧

图6-7 按钮图标显示在按钮上方

图6-8 按钮图标显示在按钮下方

除了这几种显示方式外，在很多时候开发者还会想要以图标的形式来显示按钮，这种情况下，可以将data-iconpos属性的值设为notext来达到想要的效果，图6-9是将范例6-3中的data-iconpos全部改为notext之后的效果。

图6-9 仅显示图标的按钮

提示

尽管设置了notext之后的按钮宽度变得很小，但是它仍然独自占用页面中的一行，这时就需要配合有效的布局或者分组，来实现屏幕空间的有效利用。

也许读者在尝试为按钮加入图标时会出现图标处为空白样式的情况，主要有两种原因：一是代码本身出现了问题；二是当所引用的js或css样式文件在本地时，没有配套的图标文件与之对应。

那怎么解决呢？很简单，在jQuery Mobile官网上找到zip file并下载整个文件，解压后可以找到一个名为image的文件夹，将此文件复制到所使用的jQuery Mobile目录下，图标就可以正常显示了。

上一章目录下一章