jquery mobile 自定义图标

Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

给链接添加data-icon 属性，可以添加按钮的图标

html代码

<a href=”index.html” data-role=”button” data-icon=”delete”>Delete</a>

带有图标的按钮：

图标 Icon set

---

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=”Forward”

后退　 data-icon=”Back”

网格　 data-icon=”Grid”

五角星 data-icon=”Star”

警告　 data-icon=”Alert”

信息　 data-icon=”info”

首页　 data-icon=”home”

搜索　 data-icon=”Search”

图标组 Icon set

---

默认情况下，所有按钮图标出现在按钮的文本的左侧。

可以通过data-iconpos=”top” / “bottom” 属性来覆盖此默认

<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”right”>Delete</a>

一个图标在右边的按钮：

也可以用 data-iconpos=”top”创建图标在文本上方的按钮

一个图标在文字上方的按钮：

也可以用 data-iconpos=”bottom”创建图标在文本下方的按钮

一个图标在文字下方的按钮：

你可以通过data-iconpos=”notext”创建一个只有图标的按钮。button插件会在屏幕上隐藏文本，但是会把文本作为 title属性作为screen readers的问容和支持小提示的浏览器， 例如，把前例中的 data-iconpos=”right”替换为data-iconpos=”notext”

<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”notext”>Delete</a>

一个只有图标的按钮

自定义图标 Custom Icons

要使用自定义图标，指定一个唯一的data-icon 值（比如data-icon=“myapp-email ”）?Jquery Mobile的button插件会生成一个class值添加上去，该值由ui-icon-与data-icon的值组合而成（ui-icon- myapp-email ），然后在css中指定这个类的背景图片地址。为了保持视觉效果的一致，请使用png-8格式的白色8*18的透明图标

图标和地址 Icons and themes

在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子

“A”主题下的图标按钮

“B”主题下的图标按钮

“C”主题下的图标按钮

==================================可爱的分隔线======================================

很多时候，系统图标不能满足我们的要求，那么如何自定义导航图标？查找了很多相关资料、google、百度一番之后，发现通过id来定义是个不错的选择，看一下做好的效果，不错吧！

Css Code:

1	.footer .ui-btn .ui-btn-inner{ padding-top:60px; }

2	.footer .ui-btn .ui-icon{width:60px;height:60px;}

3	#btn-about .ui-icon{background:url(../images/icon.png) no-repeat 0 50%;background-size:300px 60px;}

4	#btn-value .ui-icon{background:url(../images/icon.png) no-repeat -60px 50%;background-size:300px 60px;}

5	#btn-technology .ui-icon{background:url(../images/icon.png) no-repeat -120px 50%;background-size:300px 60px;}

6	#btn-case .ui-icon{background:url(../images/icon.png) no-repeat -180px 50%;background-size:300px 60px;}

7	#btn-contactus .ui-icon{background:url(../images/icon.png) no-repeat -240px 50%;background-size:300px 60px;}

Html Code:

查看源代码 打印 帮助

1	<div class="footer" data-theme="a" data-role="footer" data-position="fixed">

2	<div data-role="navbar">

3

<ul>

4	<li><a id="btn-about" href="#page1" data-icon="custom" data-transition="slide">关于</a></li>

5	<li><a id="btn-value" href="#page2" data-icon="custom" data-transition="slide">价值</a></li>

6	<li><a id="btn-technology" href="#page3" data-icon="custom" data-transition="slide">技术</a></li>

7	<li><a id="btn-case" href="#page4" data-icon="custom" data-transition="slide">案例</a></li>

8	<li><a id="btn-contactus" class="ui-btn-active" href="#page5" data-icon="custom" data-transition="slide">联系</a></li>

9

</ul>

10

</div>

11

</div>