jQuery Mobile 按钮图标

jQuery Mobile 是一个基于HTML5的移动应用框架，它使用JavaScript和CSS3技术，让开发者简单快捷地创建出最佳的跨平台手机网站和应用程序。按钮图标是jQuery Mobile框架中的一个重要组件，它可以提高用户界面的美观性和易用性，从而优化用户体验。

按钮图标样式

jQuery Mobile 框架提供多种按钮图标样式，包括：默认样式、圆角样式、扁平化样式和填充式样式等，可以通过简单的HTML标记来实现。

默认样式即为最原始的按钮样式，可以通过 data-icon 属性来设置按钮图标。

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

其中 data-role="button" 属性表示按钮类型为按钮，data-icon="star" 表示按钮图标类型为 star。

圆角样式可以通过添加 data-corners="true" 属性来实现，此时按钮该设置将会设置为圆角。

<a href="#" data-role="button" data-icon="star" data-corners="true">Button</a>

扁平化样式可以通过添加 data-shadow="false" 和 data-theme="b" 两个属性来实现，此时按钮的外观将没有阴影。

<a href="#" data-role="button" data-shadow="false" data-theme="b">Button</a>

填充式样式可以通过添加 data-iconpos="right" data-inline="true" data-iconshadow="false" 和 data-corners="false" 四个属性来实现，此时将不会出现按钮图标和按钮内容之间的间隔。

<a href="#" data-role="button" data-icon="star" data-iconpos="right" data-inline="true" data-iconshadow="false" data-corners="false">Button</a>

jQuery Mobile 框架提供多种按钮图标类别，包括：最常用的通用图标、屏幕方向图标、文件列表图标、网站链接图标、音频视频图标和下载图标等，每个类别下还有多种不同的图标可供选择。

通用图标是最常用的按钮图标，包括：check、delete、arrow-l、arrow-r、star 等，在需要的时候可以直接使用。

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

屏幕方向图标可用于切换设备屏幕的方向，包括：back、forward、refresh 等。

<a href="#" data-role="button" data-icon="back">Back</a>

文件列表图标可用于选择文件类型，包括：grid、listview、star、search 等。

<a href="#" data-role="button" data-icon="grid">Grid</a>

网站链接图标可用于在移动端打开网站链接，包括：home、globe、mail、phone 等。

<a href="#" data-role="button" data-icon="home">Home</a>

音频视频图标可用于播放音频视频，包括：play、pause、stop、audio 等。

<a href="#" data-role="button" data-icon="play">Play</a>

下载图标可用于下载文件，包括：download、upload、toggle 等。

<a href="#" data-role="button" data-icon="download">Download</a>

jQuery Mobile 框架中按钮图标作为界面的重要组件，可以提高用户的使用体验，同时也方便了开发者的开发工作。在使用时，需要结合文档中提供的样式和类别，进行合适的选择和配置。