jQuery Mobile Button 小部件图标选项

jQuery Mobile Button 小部件图标选项允许程序员使用预定义的图标将按钮与其他元素关联。

语法

<a href="#" data-role="button" data-icon="icon-name">Button</a>

或

<button data-icon="icon-name">Button</button>

注意事项

• 图标名称可以通过在 "icon-" 之后添加图标名称或缩写来指定。例如，data-icon="delete" 将显示删除图标。
• 图标显示在按钮文本旁边或图标填充的按钮中心（视具体情况而定）。
• 尽管可以将任何图像作为按钮图标，但只有经过过滤器处理的内置图标可以正确调整大小并放置在正确的位置。
• 可选的标识符 "left" 和 "right" 可以通过 data-iconpos 属性将图标放置在文本的左侧或右侧。
• 支持的按钮元素包括 <a> 和 <button>。

内置图标

jQuery Mobile 中提供了一组内置图标，可以直接在按钮上使用。以下是一些内置图标：

| 图标名称 | 说明 | | ------- | ------ | | action | 表示任何类型的操作 | | back | 表示向后导航 | | bars | 表示侧栏菜单 | | bullets | 表示列表项目 | | delete | 表示删除操作 | | grid | 表示网格视图切换器 | | info | 表示添加信息 | | lock | 表示安全或锁定 | | mail | 表示电子邮件 | | plus | 表示添加内容 | | search | 表示搜索 | | user | 表示用户资料 |

示例代码

<a href="#" data-role="button" data-icon="plus" data-iconpos="left">添加</a>
<button data-icon="search">搜索</button>