jquerymobile中的按钮大集合

[/code] 本文小结了jquery mobile中的一些常见按钮的用法&＃xff0c;代码和样式&＃xff0c;供参考&＃xff1a;

1 首先是引入jquery和jquery mobile相关文件
[code&＃61;"java"]




















2 下面是按钮列表


[*]Button Icons


[url&＃61;Javascript:void(0)]Delete[/url]
[url&＃61;Javascript:void(0)]Plus[/url]
[url&＃61;Javascript:void(0)]Minus[/url]
[url&＃61;Javascript:void(0)]Check[/url]
[url&＃61;Javascript:void(0)]Grid[/url]
[url&＃61;Javascript:void(0)]Foward[/url]
[url&＃61;Javascript:void(0)]Refresh[/url] [url&＃61;Javascript:void(0)]Gear[/url]
[url&＃61;Javascript:void(0)]Left Arrow[/url]
[url&＃61;Javascript:void(0)]Right Arrow[/url]
[url&＃61;Javascript:void(0)]Up Arrow[/url] [url&＃61;Javascript:void(0)]Down Arrow[/url]
[url&＃61;Javascript:void(0)]Home[/url]
[url&＃61;Javascript:void(0)]Alert[/url]
[url&＃61;Javascript:void(0)]Star[/url]
[url&＃61;Javascript:void(0)]Info[/url]
[url&＃61;Javascript:void(0)]Refresh[/url]
[url&＃61;Javascript:void(0)]Back[/url]





运行后&＃xff0c;下图是其效果&＃xff1a;

[img]http://dotnetspeaks.com/ArticleImages/jquery%20mobile%20-%20button%20icons.png[/img]



3 再来个没文字图片的

[*]Icons with no text


[url&＃61;Javascript:void(0)]Delete[/url]
[url&＃61;Javascript:void(0)]Plus[/url]
[url&＃61;Javascript:void(0)]Minus[/url]
[url&＃61;Javascript:void(0)]Check[/url]





[img]http://dotnetspeaks.com/ArticleImages/jQuery%20Mobile%20-%20Button%20with%20no%20text.png[/img]



4 再演示文字结合按钮的和分组按钮的


[*]Inline

[url&＃61;Javascript:void(0)]Delete[/url]
[url&＃61;Javascript:void(0)]Plus[/url]
[url&＃61;Javascript:void(0)]Minus[/url]
[url&＃61;Javascript:void(0)]Check[/url]

[*]Horizontal Grouping





[*]No Shadow


[url&＃61;Javascript:void(0)]Delete[/url]
[url&＃61;Javascript:void(0)]Plus[/url]

[*]No Corners


[url&＃61;Javascript:void(0)]Minus[/url]
[url&＃61;Javascript:void(0)]Check[/url]

[*]Icon Position


[url&＃61;Javascript:void(0)]Grid[/url]
[url&＃61;Javascript:void(0)]Foward[/url]
[url&＃61;Javascript:void(0)]Refresh[/url]
[url&＃61;Javascript:void(0)]Gear[/url]




运行效果&＃xff1a;

[img]http://dotnetspeaks.com/ArticleImages/jquery%20mobile%20Buttons%20with%20shadow%20no%20corners%20icon%20position.jpg[/img]