jquery moblie 按钮图标那点事

星期四, 2012-04-12 | Author: Lee | html5, pagemaker | 5,415 views

记忆力不好记不住jqm图标的样子,做此文图文对照，很方便自己知道是什么图如下（系统提供的18个图标）：本文参照api摘录版：

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
 
data-icon属性可以被用来创建如下所示的图标
左箭头 	data-icon="arrow-l"
右箭头 	data-icon="arrow-r"
上箭头 	data-icon="arrow-u"
下箭头 	data-icon="arrow-d"
删除   	data-icon="delete"
添加 	data-icon="plus"
减少 	data-icon="minus"
检查 	data-icon="check"
齿轮 	data-icon="gear"
刷新    data-icon="refresh"
前进 	data-icon="forward"
后退 	data-icon="back"
网格 	data-icon="grid"
五角星 	data-icon="star"
警告 	data-icon="alert"
信息 	data-icon="info"
首页 	data-icon="home"
搜索 	data-icon="search"


data-iconpos 指定图标的位置(top/bottom/left/right/notext) 不解释
图片对照如下：三种模版的三种图片，自己定义图片不在本文范围内了

赏

Tags: , , , ,

文章作者: Lee

本文地址： https://www.pomelolee.com/943.html

除非注明，Pomelo Lee文章均为原创，转载请以链接形式标明本文地址

一条评论 to jquery moblie 按钮图标那点事

Pomelo Lee
2012 年 04 月 13 日

自定义图片的方法也很方便：
那么可以指定一个其他的 data-icon 的值，例如: data-icon=”email-msg”
然后我们可直接在 CSS 定义：.ui-icon-email-msg {background:url(‘/images/mail18x18.png’) no-repeat 0 0;}
相当于 ui-icon- 加上你指定的 data-icon 就是对应的 css 的 class 值。
官服建议使用18×18的png图片最好啦

Leave a comment

Search

相关文章

热门文章

最新文章

文章分类

标签云

Links

Meta