Jquery mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。例如下图

一、添加图标到按钮

可以使用ui-icon类将图标添加到按钮上。并可以使用指定的类来设置图标的位置。

下面我们列出jquery mobile提供的常用的图标

 

下面我们通过代码创建左箭头

 

运行结果：

 

 

其中ui-icon-arrow-l表示左箭头， ui-btn-icon-left表示左箭头的位置在左侧。

其他按钮图标的使用也是类似的。

除了ui-btn-icon-left 用来定位之外，还有其他定位方式，分别是：

ui-btn-icon-right：右侧

ui-btn-icon-top: 顶部

ui-btn-icon-bottom：底部

如果为指定按钮图标的位置，图标将不显示。

二、只显示图标

如果想只显示图标，可以设置ui-btn-incon-notext:表示只显示图标，不显示文本。

下面代码表示只显示首页图标

 

 

除此之外，我们还可以为图标添加阴影和圆角

 

运行结果：

 

三、移除灰色圆圈

我们可以看到，所有的图标都有一个灰色的圆圈，有时间我们是不需要这样的圆圈的，此时可以通过"ui-nodisc-icon"类去除该圆圈

 

运行结果：去除了首页图标带有的灰色圆圈

 

四、改变按钮的颜色

默认情况下，所有图标都是白色的，如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：

 

运行结果：