jQuery Mobile 按钮图标

jQuery Mobile 按钮图标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左箭头尝试一下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">顶部</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-searchui-btn-icon-notext">搜索</a> 尝试一下 ? 移除圆圈默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：实例<a href="#anylink" class="ui-btn ui-icon-searchui-btn-icon-left">使用圆圈 (默认)</a><a href="#anylink" class="ui-btn ui-icon-searchui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>尝试一下 ?黑色、白色按钮默认情况下，所有图标都是白色的。如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：实例<a href="#anylink" class="ui-btn ui-icon-searchui-btn-icon-left">白色</a><a href="#anylink" class="ui-btn ui-icon-searchui-btn-icon-left ui-alt-icon">黑色</a>尝试一下 ?更多实例向容器添加"ui-nodisc-icon" 类使用 "ui-nodisc-icon" 类的实例。向容器添加"ui-alt-icon" 类使用 "ui-alt-icon" 类的实例。