jQuery Mobile 按钮图标

添加图标到 jQuery Mobile 按钮

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

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

注意: 在其他方式的按钮上,如列表或表单中的按钮需要使用 data-icon 属性。

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

按钮类说明按钮实例
ui-icon-arrow-l左箭头//img.mukewang.com/wiki/5ba498a109ed790e00340032.jpg试一试
ui-icon-arrow-r右箭头//img.mukewang.com/wiki/5ba498b6094acbf400310030.jpg试一试
ui-icon-info信息//img.mukewang.com/wiki/5ba4993f095b5acb00280029.jpg试一试
ui-icon-delete删除//img.mukewang.com/wiki/5ba4994709e9cfc900260028.jpg试一试
ui-icon-back后退//img.mukewang.com/wiki/5ba4994e096943ef00320031.jpg试一试
ui-icon-audio扬声器//img.mukewang.com/wiki/5ba49960091f9fbb00330031.jpg试一试
ui-icon-lock挂锁//img.mukewang.com/wiki/5ba4a0b5090ada5e00280029.jpg试一试
ui-icon-search搜索//img.mukewang.com/wiki/5ba4a0c109cb148500340030.jpg试一试
ui-icon-alert警告//img.mukewang.com/wiki/5ba4a0f70967236400300029.jpg试一试
ui-icon-grid网格//img.mukewang.com/wiki/5ba4a113094326e700300029.jpg试一试
ui-icon-home主页//img.mukewang.com/wiki/5ba4a13109b9870100350034.jpg试一试

定位图标

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

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

图标的位置:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>

运行案例

说明:如果未指定按钮图标的位置,图标将不显示。

只显示图标

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

实例:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a>

运行案例

移除圆圈

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

实例:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圆圈 (默认)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>

运行案例

黑色、白色按钮

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

实例:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a>

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信