jquery mobile中的按钮大集合

最新推荐文章于 2019-01-08 05:28:49 发布

jackyrongvip

最新推荐文章于 2019-01-08 05:28:49 发布

阅读量154

点赞数

分类专栏： Android 文章标签： jquery ViewUI

Android 专栏收录该内容

137 篇文章 0 订阅

订阅专栏

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

1 首先是引入jquery和jquery mobile相关文件
  [code="java"]
<!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]

运行后，下图是其效果：
[img]http://dotnetspeaks.com/ArticleImages/jquery%20mobile%20-%20button%20icons.png[/img]

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]

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

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>

效果为：
[img]http://dotnetspeaks.com/ArticleImages/jQuery%20Mobile%20Button%20Inline%20and%20Button%20Grouping.png[/img]

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]

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

jackyrongvip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile中的按钮大集合

[code="java"][/code] 本文小结了jquery mobile中的一些常见按钮的用法，代码和样式，供参考：1 首先是引入jquery和jquery mobile相关文件 [code="java"] [/code]2 下面是按钮列表 [code="j...
复制链接

扫一扫

专栏目录