oracle按钮图标说明介绍,jQuery Mobile 按钮图标

jQuery Mobile 按钮图标

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

添加图标到 jQuery Mobile 按钮

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

Search

注意： 在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍。

下面我们列出一些 jQuery Mobile 提供的可用图标：

按钮类

描述

按钮

实例

ui-icon-arrow-l

左箭头

ui-icon-arrow-r

右箭头

ui-icon-info

信息

ui-icon-delete

删除

ui-icon-back

后退

ui-icon-audio

扬声器

ui-icon-lock

挂锁

ui-icon-search

搜索

ui-icon-alert

警告

ui-icon-grid

网格

ui-icon-home

主页

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

您也可以规定图标定位在按钮的什么部位：顶部(top)、右侧(right)、底部(bottom)、左侧(left)。

请使用 ui-btn-icon 属性来指定位置：

图标的位置：

顶部

class="ui-btn ui-icon-search ui-btn-icon-right">右侧

class="ui-btn ui-icon-search ui-btn-icon-bottom">底部

class="ui-btn ui-icon-search ui-btn-icon-left">左侧

尝试一下 »

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

只显示图标

如果你只想显示图标，可以使用 "notext":

实例：

搜索

尝试一下 »

移除圆圈

默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：

实例

使用圆圈 (默认)

去掉圆圈

尝试一下 »

黑色、白色按钮

默认情况下，所有图标都是白色的。

如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：

实例

白色

黑色

尝试一下 »

更多实例

向容器添加

"ui-nodisc-icon" 类

使用 "ui-nodisc-icon" 类的实例。

向容器添加

"ui-alt-icon" 类

使用 "ui-alt-icon" 类的实例。