特别申明：本系列教程由小春撰写
相比其他组件，按钮是最基本也是最常见的，那在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"的属性
PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注
关于小春
专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博