创建按钮数据-角色=按钮向HTML元素添加数据-角色='按钮'属性。JQuery Moble会将这个元素增强为按钮样式。Jquery Mobile的框架包含一组最常用的移动应用程序所需的图标。为了减少下载大小，Jquery Mobile包含了一张白色的精灵图片，并在图标后面自动添加了一个半透明的黑色圆圈，以确保图片在任何背景颜色下都能清晰显示。

样式链接按钮

在网页的主内容块中，您可以通过任何样式的锚点链接向按钮添加data-role='button '属性。该框架将加强与标签和类的链接方式。例如，这个标签:

a href=' index . html ' data-role=' button ' link button/a

注意：像按钮链接这样的样式和下面可视选择按钮的真实形态都是一样的，但也有一些重要的区别。基于链接的按钮是插件，不仅用于标记插件的样式以生成按钮，因此不支持表单按钮方法(启用、禁用和刷新)。如果需要禁用基于链接的按钮(或元素)，可能会申请残疾等级的UI，残疾人可以用java脚本达到同样的效果。

迷你数据-迷你='真'

更紧凑的版本在工具栏和狭小的空间中非常有用。添加一个带有data-mini='true '属性的按钮来创建一个迷你版本。

a href='index.html '数据-角色='button '数据-mini='true '链接按钮/a

向按钮添加图标数据图标查询移动框架包括一组移动应用程序通常需要的选定图标。为了最小化下载大小，jQuery Mobile包含一个带有单个白色图标的向导，并在半透明的黑色圆圈后面自动添加一个图标，以确保它具有任何具有良好对比度的背景颜色。

一个图标，可以通过添加指定要为锚点显示的图标数据的图标属性来添加到按钮。例如，以下标签:

a href=' index . html ' data-role=' button ' data-icon=' delete ' delete/a

迷你版本添加了data-mini='true '属性。

图标样式列表

JQuery Mobile自带很多小按钮，如下图所示：

左箭头：数据-图标='arrow-l '右箭头：数据-图标='arrow-r '上箭头：数据-图标='arrow-u '下箭头：数据-图标='arrow-d '删除：数据-图标='delete '添加：数据-图标=。检查：数据-图标='检查'档位：数据-图标='档位'前进：数据-图标='前进'后退：数据-图标='后退'网格：数据-图标='网格'五边形：数据-图标='星形'警告：数据-图标='。

图标定位数据。

默认情况下，所有图标都放置在按钮文本的左侧。默认情况下，这可以覆盖data-iconpos属性来设置图标的顶部、底部、右侧和左侧文本。例如，标记：

font color=# 0000 FFA href=' index . html ' data-role=' button ' data-icon=' delete ' data-icon pos=' right ' delete/a

隐藏图片数据上的文本-iconpos='notext '。

您也可以创建一个图标按钮并设置data-iconpos='notext '。按钮插件将隐藏屏幕上的文本，但将其用作屏幕阅读器和设备支持工具提示的上下文链接的标题属性。例如，data-iconpos='right '，data-iconpos='notext ':

a href=' index . html ' data-role=' button ' data-icon=' delete ' data-icon pos=' note XT ' delete/a

和迷你直列。

并且可以添加迷你内嵌属性来产生一个更紧凑的按钮。

自定义图标数据-图标=“自定义值”

要使用自定义图标，您需要指定一个数据图标值。Jquery Mobile的按钮插件会生成一个CSS类，前缀是ui-icon-后面是数据-icon值。假设：有一个按钮的data-icon属性的值为myapp-email，即data-icon=“my app-email”。然后产生的CSS类是ui-icon-myapp-email。

然后，您可以在样式表中编写一个CSS规则来定义ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉一致性，请创建一个18x18像素的白色PNG-8图标，并将其保存为Alpha透明度。ui-icon-myapp-email { background-image : URL(' app-icon-email . png ')；}这将创建标准分辨率的图标，但许多设备都有非常高分辨率的显示器，就像iPhone 4的视网膜显示器一样。添加一个高清图标，创建一个36X36像素(18像素大小的两倍)的图标，并添加第二个规则来使用WebKit几分钟。设备像素比：2。媒体找目标的规则是只能高分辨率显示。指定背景图片高清图标文件并将背景像素大小设置为18x18将在相同的18像素空间中安装36个像素图标。媒体查询块可以使用多个图标规则：

@媒体专用屏幕和(-web kit-min-device-pixel-ratio : 2){。ui-icon-myapp-email { background-image : URL(' app-icon-email-highles . png ')；背景尺寸size: 18px 18px} .更多高清图标规则请点击此处.}