接下来的几篇文章中会对JQM的组件逐一介绍,不过笔者用的版本是1.3.X,可能会与最新的1.4有比较大的差异。
先来说说JQM中的按钮组件吧,按钮是页面中最常见的一种组件了,JQM提供了样式丰富的按钮,用户体验非常不错。现在就来具体说明一下JQM中的按钮吧。
- JQM渲染组件的方式说明
与大多数前端框架不同的是,JQM在渲染组件时,并不是单纯的在原有的页面元素上添加CSS和JS响应。为了让组件的样式更加接近于原生的组件,JQM会在原有元素上添加一部分新的元素并为他们加上样式。
- 基本按钮
如:
<span style="white-space:pre"> </span><a href="#page2" data-role="button">Link button</a>
如果这时我们用DOM查看工具观察真正在页面上生成的代码,会发现页面中生成的代码是这样的:
可以看到,JQM不仅对原有的a标签进行了渲染,同时加上了很多原本没有的元素和样式,这就使最终我们得到的按钮用户体验更好,也更接近原生组件。
下面是这段代码生成的效果:
这里所有组件都做了响应式处理,宽度会自动适应设备。
注:带链接的按钮元素和表单中的 button 元素会被自动渲染,无需另外添加 data-role="button" 属性。
- 自带的按钮图标
代码:
<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>
![jquery-mobile-html5-2-5](https://i-blog.csdnimg.cn/blog_migrate/c71d8f0d331a40c790aa11ff3b6a3f7a.png)
附带一张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>
效果:
- 其他
一些通用的属性也可以在按钮组件中使用:
比如JQM所有组件都支持data-theme=""属性,这个属性顾名思义是用来设置组件或容器的主题,JQM官方提供5中主体(部分版本的主题数可能有变化)。开发人员通过这个属性可以快速的变更整个页面的风格。另外,在之前的文章中提到官方的主题编辑器也可以自定义主题,并通过此属性将自定义主题应用到产品中去。
还有data-mini="true"属性能让组件等比例缩小,更适合某些布局。类似的还有很多,我在这就不一一赘述了,真的用到的话,去查查官方的API吧。