jQuery Mobile 自定义按钮图标

jQuery Mobile 自定义按钮图标

jQuery Mobile 自带很多按钮小图标，如下图所示：

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

jQuery Mobile权威指南 PDF+源码

一般我们在 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 值。

jQuery Mobile 的详细介绍：请点这里
jQuery Mobile 的下载地址：请点这里

本文永久更新链接地址：