jQuery Mobile 组件 之 按钮

接下来的几篇文章中会对JQM的组件逐一介绍，不过笔者用的版本是1.3.X，可能会与最新的1.4有比较大的差异。

先来说说JQM中的按钮组件吧，按钮是页面中最常见的一种组件了，JQM提供了样式丰富的按钮，用户体验非常不错。现在就来具体说明一下JQM中的按钮吧。

• JQM渲染组件的方式说明

在具体说明按钮的用法之前，我们先来说明一下JQM渲染组件的特别方式。

与大多数前端框架不同的是，JQM在渲染组件时，并不是单纯的在原有的页面元素上添加CSS和JS响应。为了让组件的样式更加接近于原生的组件，JQM会在原有元素上添加一部分新的元素并为他们加上样式。

• 基本按钮

引入JQM相关文件后，我们只需要给任意的a标签加上data-role="button"属性，这个链接就被渲染成了按钮的样式。

如：

<span style="white-space:pre"></span><a href="#page2" data-role="button">Link button</a>

如果这时我们用DOM查看工具观察真正在页面上生成的代码，会发现页面中生成的代码是这样的：

可以看到，JQM不仅对原有的a标签进行了渲染，同时加上了很多原本没有的元素和样式，这就使最终我们得到的按钮用户体验更好，也更接近原生组件。

下面是这段代码生成的效果：

这里所有组件都做了响应式处理，宽度会自动适应设备。

注：带链接的按钮元素和表单中的 button 元素会被自动渲染，无需另外添加 data-role="button" 属性。

• 自带的按钮图标

JQM自带了一部分按钮的图标供开发者直接使用，开发者只需要在希望使用图标的按钮元素中加上data-icon=" "属性就可以得到带图标的按钮。

代码：

<span style="white-space:pre"></span><a href="#page2" data-role="button" data-icon="check">Check</a>

效果：

而且，JQM还支持开发者自定义图标的位置。

如果我们在刚才的标签中加入data-iconpos="" 属性，就可以设置图标相对于文字的位置（ 可取值为：top, bottom, right ，默认为 left ），下面我们看看效果

<span style="white-space:pre"></span><a href="#page2" data-role="button" data-icon="check" data-iconpos="top">Check</a>

附带一张JQM按钮图标取值对照表：

• 按钮组

所谓按钮组，就是将多个按钮放在一个容器里，并且对他们做特殊渲染，使得他们看起来更像一个整体

可以将多个按钮放到一个容器内并给容器设置 data-role="controlgroup" 属性，例如：

<div data-role="controlgroup">    <a href="#page2" data-role="button">是</a>    <a href="#page2" data-role="button">否</a>    <a href="#page2" data-role="button">取消</a></div>

所产生的效果就是：

而如果我们在此再加上data-type="horizontal" 属性，我们会得到一组水平排列的按钮：

<div data-role="controlgroup" data-type="horizontal">    <a href="#page2" data-role="button">是</a>    <a href="#page2" data-role="button">否</a>    <a href="#page2" data-role="button">取消</a></div>

效果：

• 其他

按钮组件还支持通过data-inline=""属性将按钮变成内联按钮，加上该属性后，JQM会自动给按钮加上display: inline-block 的 CSS，让链接按照文字的长度来控制自身长度，并且可以与其他内联元素共行。

一些通用的属性也可以在按钮组件中使用：

比如JQM所有组件都支持data-theme=""属性，这个属性顾名思义是用来设置组件或容器的主题，JQM官方提供5中主体（部分版本的主题数可能有变化）。开发人员通过这个属性可以快速的变更整个页面的风格。另外，在之前的文章中提到官方的主题编辑器也可以自定义主题，并通过此属性将自定义主题应用到产品中去。

还有data-mini="true"属性能让组件等比例缩小，更适合某些布局。类似的还有很多，我在这就不一一赘述了，真的用到的话，去查查官方的API吧。