【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

在范例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所示。

【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)_第1张图片

 

图6-3 按钮的图标

虽然与微信经过精心设计的图标还有很大的差距,但是却比之前光秃秃的十字叉要好看了许多。这些图标是在jQuery Mobile给出的多组图表中选出的几款最适合当前按钮文字内容的图标,除了这些图标之外,jQuery Mobile还为开发者准备了其他的图标样式共17种,笔者将它们整理在表6-1中。

 

 

 

 

jQueryMobile可用度越来越高,入门门槛低,可以少写代码来生成移动设备友好的界面。《构建跨平台APP:jQuery Mobile移动应用实战》这本书采用实例驱动的方式介绍jQueryMobile下的APP开发,全书提供70余个实战案例教会读者进行移动开发,最后还通过6个小型项目来复习和巩固所学知识点。想和作者交流,加Q群:348632872,作者在这里等你偶来。

【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)_第2张图片

 

你可能感兴趣的:(jquery,mobile)