码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-01-30 22:24:54      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

在范例5-4所使用的导航栏中,已经为button增加了图标的样式,可是当时并没有介绍button的图标到底是怎么一回事。以下截取范例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 导航栏的样式

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

【范例6-2 为尾部栏的button增加图标】

<!DOCTYPE html>     								<!--声明HTML 5-->
<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 button的图标

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




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

技术分享

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

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4263276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!