上QQ阅读APP看书，第一时间看更新
6.2 为按钮加入图标
在范例5-4所使用的导航栏中，已经为按钮加入了图标的样式，但是当时并没有介绍按钮的图标究竟是怎么一回事。下面是导航栏部分的代码：
<div data-role="footer">
<div data-role="navbar" data-grid="c">
<ul>
<li><a id="chat" href="#" data-icon=“plus”>微信</a></li>
<li><a id="email" href="#" data-icon=“plus”>通讯录</a></li>
<li><a id="skull" href="#" data-icon=“plus”>找朋友</a></li>
<li><a id="beer" href="#" data-icon=“plus”>设置</a></li>
</ul>
</div>
</div>
导航栏部分的样式如图6-2所示。
图6-2 导航栏的样式
这个图标是通过属性data-icon=“plus”来决定的，接下来介绍怎样通过data-icon属性来控制页面上按钮的图标。
【范例6-2 为尾部栏的按钮加入图标】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>Fixed Positioning Example</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="header" data-position="fixed" data-fullscreen=
"true">
14 <a href="#">返回</a>
15 <h1>头部栏</h1>
16 <a href="#">设置</a>
17 </div>
18 <div data-role="content">
19 <a href="#" data-role="button">这是一个按钮</a>
20 <! --可以加入图标，但是在此处先不对它们做任何修改-->
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 <a href="#" data-role="button">这是一个按钮</a>
27 <a href="#" data-role="button">这是一个按钮</a>
28 <a href="#" data-role="button">这是一个按钮</a>
29 <a href="#" data-role="button">这是一个按钮</a>
30 <a href="#" data-role="button">这是一个按钮</a>
31 <a href="#" data-role="button">这是一个按钮</a>
32 <a href="#" data-role="button">这是一个按钮</a>
33 </div>
34 <div data-role="footer" data-position="fixed" data-fullscreen="true">
35 <div data-role="navbar">
36 <ul>
37 <li><a id="chat" href="#" data-icon="info">微信</a></li>
<! --在此处加入图标data-icon="info"-->
38 <li><a id="email" href="#" data-icon="home"> 通讯录
</a></li>
<! --data-icon="home"图标样式为"主页"-->
39 <li><a id="skull" href="#" data-icon="star"> 找朋友
</a></li>
<! --data-icon=”star”图标样式为"星星"-->
40 <li><a id="beer" href="#" data-icon="gear">设置</a></li>
<! --data-icon=”gear”图标样式为"齿轮"-->
41 </ul>
42 </div><! -- /navbar -->
43 </div><! -- /footer -->
44 </div>
45 </body>
46 </html>
运行结果如图6-3所示。
图6-3 按钮的图标
虽然与微信经过精心设计的图标还有很大的差距，但是比之前光秃秃的十字叉要好看许多。这些是在jQuery Mobile给出的多组图表中选出的几款最适合当前按钮文字内容的图标，除这些图标之外，jQuery Mobile还为开发者准备了其他7种图标样式，如表6-1所示。
表6-1 jQuery Mobile自带的图标
