- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 699字
- 2024-10-30 00:11:31
6.4 自定义按钮的图标
通过上一节的讲解，笔者不禁要惊叹一下jQuery Mobile设计的精妙了，不过如果按钮图标能够自定义就更好了。由于相对默认图标而言，自定义图标使用会比较复杂，因此这里专门用一节来讲解自定义按钮图标的使用方法。
既然是自定义按钮图标，首先要把图片准备好，为了达到较好的显示效果，尽量使用png格式的图片，现在打开Photoshop绘制一个18×18像素的图标，如图6-10所示。
图6-10 round.png示意图
这里绘制了一个简单的图标，设置图片背景为透明，在图片的中心点有一个大小适中的白色实心圆，将此文件命名为round.png，并保存在jQuery Mobile目录下。之后再准备一个页面，代码如下。
【范例6-4 自定义按钮的图标】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>自定义图标 </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">
14 <a href="#">返回</a>
15 <h1>头部栏</h1>
16 <a href="#">设置</a>
17 </div>
18 <div data-role="content">
19 <! --使用自定义图标round，通过属性data-icon="round"进行定义-->
20 <a href="#" data-role="button" data-iconpos="left" data-
icon="round">自定义图标在左侧显示</a>
21 <a href="#" data-role="button" data-iconpos="right" data-
icon="round">自定义图标在右侧显示</a>
22 <a href="#" data-role="button" data-iconpos="top" data-
icon="round">自定义图标在上方显示</a>
23 <a href="#" data-role="button" data-iconpos="bottom"
data-icon="round">自定义图标在下方显示</a>
24 <a href="#" data-role="button" data-iconpos="notext"
data-icon="round">不显示自定义图标</a>
25 </div>
26 <div data-role="footer" data-position="fixed">
27 <div data-role="navbar">
28 <ul>
29 <! --使用自定义图标round，通过属性data-icon="round"进行定义
30 <li><a id="chat"href="#"data-icon="round">微信</a></li>
31 <li><a id="email" href="#" data-icon="round">通讯录
</a></li>
32 <li><a id="skull" href="#" data-icon="round">找朋友
</a></li>
33 <li><a id="beer" href="#" data-icon="round"> 设置
</a></li>
34 </ul>
35 </div><! -- /navbar -->
36 </div><! -- /footer -->
37 </div>
38 </body>
39 </html>
观察代码可以发现，在data-icon属性中引用了一个之前没有接触过的名称round。通过之前保存的图片名称round.png可以猜测，这样就能将图片作为图标显示了，但是运行后发现结果不是这样的，如图6-11所示。
图6-11 加入的新图标
显然用这种方法为按钮加入新图标是不正确的，因为这样做仅仅是设置了图标的内容，而浏览器还不知道要怎样去寻找round.png，所以要想真正加入自定义图标还需要设置好对应的CSS样式。
在页面中加入一个新的样式，样式名称由图标名与ui-icon组合而成，比如本例中图标名称为round，那么样式名就应设置为ui-icon-round。样式代码如下：
<style type="text/css">
.ui-icon-round{ background-image:url(round.png); }<! --背景图片指向刚刚保存的
round.png
</style>
保存之后再次运行，得到的结果如图6-12所示。
图6-12 新加入的图标样式得以显示
提示
在自定义图标样式时，一定要保证图标的尺寸为18×18像素，否则jQuery Mobile将只截取图片左上方18×18像素的部分进行显示。