特别申明：本系列教程由小春撰写

相比其他组件，按钮是最基本也是最常见的，那在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

PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注

关于小春

专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博