首页 > 代码库 > 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)
小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事。下面截取范例5-4中导航栏部分的代码:
<divdata-role="footer"> <div data-role="navbar"data-grid="c"> <ul> <li><a id="chat" href=http://www.mamicode.com/"#"data-icon="custom">微信 >
导航栏部分的样式如图6-2所示。
图6-2 导航栏的样式
当时笔者提到这里使用了按钮的默认图标,而这个图标是通过属性data-icon="custom"来决定的,custom是jQuery Mobile为开发者准备的默认图标之一。接下来就介绍怎样通过data-icon属性来控制页面上按钮的图标。
【范例6-2 为尾部栏的按钮加入图标】
<!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=http://www.mamicode.com/"jquery.mobile.min.css" /> >运行结果如图6-3所示。
图6-3 按钮的图标
虽然与微信经过精心设计的图标还有很大的差距,但是却比之前光秃秃的十字叉要好看了许多。这些图标是在jQuery Mobile给出的多组图表中选出的几款最适合当前按钮文字内容的图标,除了这些图标之外,jQuery Mobile还为开发者准备了其他的图标样式共17种,笔者将它们整理在表6-1中。
jQueryMobile可用度越来越高,入门门槛低,可以少写代码来生成移动设备友好的界面。《构建跨平台APP:jQuery Mobile移动应用实战》这本书采用实例驱动的方式介绍jQueryMobile下的APP开发,全书提供70余个实战案例教会读者进行移动开发,最后还通过6个小型项目来复习和巩固所学知识点。想和作者交流,加Q群:348632872,作者在这里等你偶来。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。