在范例5-4所使用的导航栏中，已经为按钮加入了图标的样式，但是当时并没有介绍按钮的图标究竟是怎么一回事。下面截取范例5-4中导航栏部分的代码：
1 <divdata-role="footer"> 2 <div data-role="navbar"data-grid="c"> 3 <ul> 4 <li><a id="chat" href="#"data-icon="custom">微信</a></li> 5 <li><a id="email" href="#"data-icon="custom">通讯录</a></li> 6 <li><a id="skull" href="#"data-icon="custom">找朋友</a></li> 7 <li><a id="beer" href="#"data-icon="custom">设置</a></li> 8 </ul> 9 </div> 10 </div>
导航栏部分的样式如图6-2所示。
图6-2 导航栏的样式
当时笔者提到这里使用了按钮的默认图标，而这个图标是通过属性data-icon="custom"来决定的，custom是jQuery Mobile为开发者准备的默认图标之一。接下来就介绍怎样通过data-icon属性来控制页面上按钮的图标。
【范例6-2 为尾部栏的按钮加入图标】
1 <!DOCTYPE html> <!--声明HTML 5--> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Fixed Positioning Example</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="jquery.mobile.min.css" /> 8 <script src="jquery-1.7.1.min.js"></script> 9 <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> 38 <!--在此处加入图标 data-icon=”info”--> 39 <li><a id="email" href="#" data-icon="home">通讯录</a></li> 40 <!--data-icon=”home”图标样式为“主页”--> 41 <li><a id="skull" href="#" data-icon="star">找朋友</a></li> 42 <!--data-icon=”star”图标样式为“星星”--> 43 <li><a id="beer" href="#" data-icon="gear">设置</a></li> 44 <!--data-icon=”gear”图标样式为“齿轮”--> 45 </ul> 46 </div><!-- /navbar --> 47 </div><!-- /footer --> 48 </div> 49 </body> 50 </html>
运行结果如图6-3所示。
图6-3 按钮的图标
虽然与微信经过精心设计的图标还有很大的差距，但是却比之前光秃秃的十字叉要好看了许多。这些图标是在jQuery Mobile给出的多组图表中选出的几款最适合当前按钮文字内容的图标，除了这些图标之外，jQuery Mobile还为开发者准备了其他的图标样式共17种，笔者将它们整理在表6-1中。
jQueryMobile可用度越来越高，入门门槛低，可以少写代码来生成移动设备友好的界面。《构建跨平台APP：jQuery Mobile移动应用实战》这本书采用实例驱动的方式介绍jQueryMobile下的APP开发，全书提供70余个实战案例教会读者进行移动开发，最后还通过6个小型项目来复习和巩固所学知识点。想和作者交流，加Q群：348632872，作者在这里等你偶来。
【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）
时间： 2024-10-12 11:17:28