| 文章简介：相比其他组件，按钮是最基本也是最常见的，那在jQuery Mobile的体系中，到底是什么样子的呢？ |
相比其他组件，按钮是最基本也是最常见的，那在jQuery Mobile的体系中，到底是什么样子的呢？我们采用"提问●回答"的方式来初步地了解一下：
1、按钮包含哪两类？
常见的：
<button>button</button> <input type="button" value="input button"/> <input type="submit" value="input submit"/> <input type="reset" value="input reset"/> <input type="image" value="input image"/>
图示：
链接按钮：
<a data-role="button">链接按钮</a>
图示：
说明：
1、常见按钮不需要添加任何额外的属性即可自动增强
2、对于链接，需要添加data-role="button"来增强为按钮
3、默认上述增强后为块级元素
2、如何设置成内联元素？
以链接按钮为例：
<a data-role="button" data-inline="true">内联链接按钮1</a> <a data-role="button" data-inline="true">内联链接按钮2</a>
图示：
说明：添加data-inline="true"的属性即可
3、对于自动增强类型的按钮，可否禁用？
以button标签为例：
禁用自动增强
说明：添加data-role="none"的属性即可
4、如何设置图标按钮？
以链接按钮为例：
<a data-icon="home" data-role="button">主页图标按钮</a> <a data-icon="search" data-role="button">搜索图标按钮</a> <a data-icon="plus" data-role="button">增加图标按钮</a> <a data-icon="minus" data-role="button">减少图标按钮</a> <a data-icon="delete" data-role="button">删除图标按钮</a> <a data-icon="refresh" data-role="button">刷新图标按钮</a> <a data-icon="alert" data-role="button">警告图标按钮</a>
图示：
说明：
1、添加data-icon="home"的属性即可生成带有home图标的按钮
2、默认图标是居左的
5、如何设置图标按钮的位置？
以链接按钮为例：
<a data-icon="home" data-role="button">主页图标按钮(默认左)</a> <a data-icon="home" data-role="button" data-iconpos="top">主页图标按钮(上)</a> <a data-icon="home" data-role="button" data-iconpos="bottom">主页图标按钮(下)</a> <a data-icon="home" data-role="button" data-iconpos="right">主页图标按钮(右)</a> <a data-icon="home" data-role="button" data-iconpos="notext">无内容文字</a>
图示：
说明：添加data-iconpos="top"的属性即可生成带有home图标的按钮(居上)
6、如何设置只有图标的按钮？
以链接按钮为例：
<a data-role="button" data-icon="home" data-iconpos="notext">只有图标，没有文字，写再多也没有用</a>
图示：
说明：添加data-iconpos="notext"的属性即可生成只有图标的按钮
7、如何设置 自定义图标的按钮？
以链接按钮为例：
<a data-role="button" data-icon="custom">自定义图标按钮</a>
说明：
1、添加data-iconpos="custom"的属性
2、增加css样式：
.ui-icon-custom{ background:; }
8、如何设置分组按钮？
<div data-role="controlgroup"> <a data-role="button">js</a> <a data-role="button">css</a> <a data-role="button">html</a> <a data-role="button">ps</a> </div>
图示：
说明：
1、给容器添加data-role="controlgroup"的属性
2、默认是垂直排列
9、如何设置水平排列的分组按钮？
<div data-role="controlgroup" data-type="horizontal"> <a data-role="button">js</a> <a data-role="button">css</a> <a data-role="button">html</a> <a data-role="button">ps</a> </div>
图示：
说明：给容器添加data-type="horizontal"的属性
demo
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索按钮
， 图标
， 链接
， 属性
， jquery ui custom
， 按钮添加
， 链接jquery mobile
， js jquery mobile
， 常见
， 如何
， 按钮添加链接
， 添加图标
jquery添加热链接
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax，以便于您获取更多的相关知识。