W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 按钮图标



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




添加图标到 jQuery Mobile 按钮

要在按钮中添加图标,请使用 ui-icon 类,并将图标放置在图标位置类 (ui-btn-icon-pos):

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

注意: 在其他方式的按钮上,如列表或表单中的按钮需要使用 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 属性来指定位置:

图标位置链接按钮

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
尝试一下 »

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

仅显示图标

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

Example

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
尝试一下 »

移除圆圈

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

Example

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
尝试一下 »

黑色、白色按钮

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

Example

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
尝试一下 »

Examples

更多实例

向容器添加 "ui-nodisc-icon" 类
使用 "ui-nodisc-icon" 类的实例。

向容器添加 "ui-alt-icon" 类
使用 "ui-alt-icon" 类的实例。