在范例5-4所使用的导航栏中，已经为按钮加入了图标的样式，但是当时并没有介绍按钮的图标究竟是怎么一回事。下面截取范例5-4中导航栏部分的代码：

 <divdata-role="footer">
 <div  data-role="navbar"data-grid="c">
 <ul>
               <li><a id="chat" href="#"data-icon="custom">微信</a></li>
               <li><a id="email" href="#"data-icon="custom">通讯录</a></li>
               <li><a id="skull" href="#"data-icon="custom">找朋友</a></li>
               <li><a id="beer" href="#"data-icon="custom">设置</a></li>
 </ul>
 </div>
 </div>

导航栏部分的样式如图6-2所示。

图6-2 导航栏的样式

当时笔者提到这里使用了按钮的默认图标，而这个图标是通过属性data-icon="custom"来决定的，custom是jQuery Mobile为开发者准备的默认图标之一。接下来就介绍怎样通过data-icon属性来控制页面上按钮的图标。

【范例6-2 为尾部栏的按钮加入图标】

 <!DOCTYPE html>                                     <!--声明HTML -->
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fixed Positioning Example</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile.min.css" />
 <script src="jquery-1.7.1.min.js"></script>
 <script src=“jquery.mobile.min.js”></script>
 </head>
 <body>
     <div data-role="page">
             <div data-role="header" data-position="fixed" data-fullscreen="true">
                 <a href="#">返回</a>
               <h1>头部栏</h1>
               <a href="#">设置</a>
         </div>
         <div data-role="content">
             <a href="#" data-role="button">这是一个按钮</a>
             <!--可以加入图标，但是在此处先不对它们做任何修改-->
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
             <a href="#" data-role="button">这是一个按钮</a>
         </div>
         <div data-role="footer" data-position="fixed" data-fullscreen="true">
             <div data-role="navbar">
                 <ul>
                     <li><a id="chat" href="#" data-icon="info">微信</a></li>
 <!--在此处加入图标 data-icon=”info”-->
                     <li><a id="email" href="#" data-icon="home">通讯录</a></li>
                        <!--data-icon=”home”图标样式为“主页”-->
                     <li><a id="skull" href="#" data-icon="star">找朋友</a></li>
                        <!--data-icon=”star”图标样式为“星星”-->
                     <li><a id="beer" href="#" data-icon="gear">设置</a></li>
                        <!--data-icon=”gear”图标样式为“齿轮”-->
                 </ul>
             </div><!-- /navbar -->
         </div><!-- /footer -->
     </div>
 </body>
 </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移动应用实战》连载五（给按钮加图标）的更多相关文章

  1. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）

    在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...

  3. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）

    除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...

  4. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）

    4.1.2  通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...

  5. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）

    4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...

  6. 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  7. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  8. jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  9. jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）

    有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...

随机推荐

  1. struts2常用的常量constant

    常用的常量配置  struts.serve.static.browserCache 该属性设置浏览器是否缓存静态内容.当应用处于开发阶段时,我们希望每次请求都获得服务器的最新响应,则可设置该属性为fa ...

  2. 64位CentOS 6.4下安装wine

    From: http://zhidao.baidu.com/question/530358126.html From: http://hi.baidu.com/billdkj/item/464fb84 ...

  3. 调用WEKA包进行kmeans聚类（java）

    所用数据文件:data1.txt @RELATION data1 @ATTRIBUTE one REAL @ATTRIBUTE two REAL @DATA 0.184000 0.482000 0.1 ...

  4. 浅谈Java的包装类

    一.什么是Java包装类 所谓Java包装类,就是将Java中的8种基本数据类型分别包装成为类的形式.包装类与基本数据类型的对应关系如下表所示. 基本数据类型 包装类 byte Byte short ...

  5. ZigBee无线网络技术在小区路灯照明系统的应用

    小区路灯照明系统是楼宇智能的一部分,但受制于布线.成本等的问题,难以得以实施.随着计算机技术的迅猛发展,无线网络技术越来越成熟,ZigBee无线网络成本低.功耗低.传输距离远等的特点,非常适合在无线路 ...

  6. JavaScript 变量克隆和判断变量类型

    一.变量克隆 在js中经常会遇到将一个变量赋值给一个新的变量这种情况,这对于基本类型很容易去实现,直接通过等号赋值就可以了,对于引用类型就不能这样了.(注:像函数,正则也可以直接通过等号赋值) 这里我 ...

  7. Laxcus大数据管理系统2.0（8）- 第六章 网络通信

    第六章 网络通信 Laxcus大数据管理系统网络建立在TCP/IP网络之上,从2.0版本开始,同时支持IPv4和IPv6两种网络地址.网络通信是Laxcus体系里最基础和重要的一环,为了能够利用有限的 ...

  8. 学习总结 for循环语句的应用

    for(初始值:条件表达式:状态改变) { } \n 表示换行   \ttab键   \\写出一个斜杠 例题解释 // 输出一个数,打印一到n出来 int n = int.Parse(Console. ...

  9. 蛮考验基础的JS笔试题（有坑小心！）

    1.  考察this var length = 10 function fn(){ alert(this.length) } var obj = { length: 5, method: functi ...

  10. Mongodb解决不能连接到服务器的错误

    注:这次解决的这个问题的前提是之前打开MongoDB之后,再次使用的时候无法连接了(使用mongod和mongo都不对) 闲话:遇到这种问题真是让人恼火,所以说句sun of beach,好了~爽 正 ...