jQuery Mobile 自定义按钮图标

小编辑 发布于 2011/10/11 12:41
阅读 32K+
收藏 8

jQuery Mobile 自带很多按钮小图标,如下图所示:

有时候这些图标无法满足你的要求的时候,jQuery Mobile 允许你进行自定义图标。

一般我们在 jQuery Mobile 中定义个按钮的方法如下:

<a href="/" data-role="button" data-icon="home">返回首页</a>

data-icon 的值是 jQuery Mobile 预设好的,完整的列表请看这里

如果我们想使用自己的图标,那么可以指定一个其他的 data-icon 的值,例如

data-icon="send-msg"

然后我们可直接在 CSS 定义:

.ui-icon-send-msg {background:url('/images/mail2_16x16.gif') no-repeat 0 0;}

相当于 ui-icon- 加上你指定的 data-icon 就是对应的 css 的 class 值。

加载中
0
游客
游客
不错。
0
开源中国首席攻城师
开源中国首席攻城师

@小编辑 小编同学,问下知道这种自定义的图片是怎么实现的吗?

易宗平
回复 @somesomewindows : 什么意思啊
游智兵
回复 @somesomewindows : 怎么实现的了
somesomewindows
somesomewindows
这种可以直接在 <a id="chatstyle" data-role="button" date-iconpos="top">chat</a> 直接通过 #chatstyle{}来定义样式
onse
onse
效果很不错,有人知道回复一下!我也想知道啊!
0
mayue20001111
mayue20001111
咋不行呢?只显示系统图标的小圆圈,谁知道给指点下下。
王竞
你没有引入image文件夹是吧?
0
城市边缘的狼
把 jQueryMobile 的 CSS/images 下面的图片替换成你加了饮料图标的图片,然后改 CSS,添加偏移量。关键是要计算好高度宽度,然后算出偏移量,这个长版本的图片随便你改啦。
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, 
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
}
.ui-icon-plus {
background-position: -0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;

}


0
xianyuhua
xianyuhua
我的图标是独立的哦。怎么加哩?
0
xianyuhua
xianyuhua
求助啊,有没有大神能指点下o ?
0
martin2009
martin2009
我发现,使用了自定义图标后,这个图标无法垂直居中了
0
feibo
feibo

引用来自“mayue20001111”的答案

咋不行呢?只显示系统图标的小圆圈,谁知道给指点下下。
图片的路径错了!
0
黃健民
黃健民

我的也不显示图片,有没有图片资源呢?
我看了一下jquery.mobile.css的源码:
.ui-icon-home {
background-position: -575px -1px;
}
这根本就没有url到图片资源嘛~这不是坑人吗?难道还要我自己导入一些图片,再一次次地修改源码???

0
A
Alien_Liang
我的image已经导入了,在谷歌浏览器能够正常显示,在手机上浏览却只显示系统图标的小圆圈,这是怎么回事呢,请大神指引!!!!
j
jqm
这个是JQM自带的ICON样式造成的吧,
KingMing
KingMing
回复 @改改名 : 我是把images放在css文件夹下的。
改改名
回复 @KingMing : 把images放在和css同级目录下,你把四张图片都下载下来放在images里面。
KingMing
KingMing
同问,您解决了么? 求赐教! 谢先
返回顶部
顶部