jquery mobile中的按钮大集合
本文小结了jquery mobile中的一些常见按钮的用法，代码和样式，供参考：
1首先是引入jquery和jquerymobile相关文件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" /> <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
2下面是按钮列表
[*]Button Icons [url=javascript:void(0)]Delete[/url] [url=javascript:void(0)]Plus[/url] [url=javascript:void(0)]Minus[/url] [url=javascript:void(0)]Check[/url] [url=javascript:void(0)]Grid[/url] [url=javascript:void(0)]Foward[/url] [url=javascript:void(0)]Refresh[/url] [url=javascript:void(0)]Gear[/url] [url=javascript:void(0)]Left Arrow[/url] [url=javascript:void(0)]Right Arrow[/url] [url=javascript:void(0)]Up Arrow[/url] [url=javascript:void(0)]Down Arrow[/url] [url=javascript:void(0)]Home[/url] [url=javascript:void(0)]Alert[/url] [url=javascript:void(0)]Star[/url] [url=javascript:void(0)]Info[/url] [url=javascript:void(0)]Refresh[/url] [url=javascript:void(0)]Back[/url]
运行后，下图是其效果：
3再来个没文字图片的
[*]Icons with no text [url=javascript:void(0)]Delete[/url] [url=javascript:void(0)]Plus[/url] [url=javascript:void(0)]Minus[/url] [url=javascript:void(0)]Check[/url]
4再演示文字结合按钮的和分组按钮的
[*]Inline [url=javascript:void(0)]Delete[/url] [url=javascript:void(0)]Plus[/url] [url=javascript:void(0)]Minus[/url] [url=javascript:void(0)]Check[/url] [*]Horizontal Grouping <div data-role="controlgroup" data-type="horizontal"> [url=javascript:void(0)]Button 1[/url] [url=javascript:void(0)]Button 2[/url] [url=javascript:void(0)]Button 2[/url] </div> [*]Normal Grouping <div data-role="controlgroup"> [url=javascript:void(0)]Button 1[/url] [url=javascript:void(0)]Button 2[/url] [url=javascript:void(0)]Button 2[/url] </div>
效果为：
5演示没阴影，圆角的
[*]No Shadow [url=javascript:void(0)]Delete[/url] [url=javascript:void(0)]Plus[/url] [*]No Corners [url=javascript:void(0)]Minus[/url] [url=javascript:void(0)]Check[/url] [*]Icon Position [url=javascript:void(0)]Grid[/url] [url=javascript:void(0)]Foward[/url] [url=javascript:void(0)]Refresh[/url] [url=javascript:void(0)]Gear[/url]
运行效果：
相关推荐
TONIYH 2020-07-22
83510998 2020-07-18
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08