jQuery Mobile教程:网页按钮实例详解

2013-04-22 11:16:49  来源:w3cplus 

网页制作Webjx文章简介:相比其他组件,按钮是最基本也是最常见的,那在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

更多