jQuery Mobile教程-基础篇-按钮篇

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

相比其他组件,按钮是最基本也是最常见的,那在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、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

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

Lunar Flyknit Chukka

如需转载,烦请注明出处:https://www.w3cplus.com/blog/697.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部