jQuery Mobile 的按钮大全

红薯 发布于 2012/08/07 23:08
阅读 16K+
收藏 82

在这篇文章中我们将详细介绍 jQuery Mobile 的按钮。在 jQuery Mobile 中所有按钮的样式一般都是文本居中,圆角,有阴影的效果,还包括一个可选的图标。

让我们来看看这些按钮是如何工作的。

Step 1: 首先创建一个 .html 页面来演示 jQuery Mobile 的按钮图标

Step 2: .html 的页面内容如下,这里我们使用了 Microsoft CDN

<!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>

Step 3: 然后将下列代码放在 .html 页面的 body 块中

<li>Button Icons</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check">Check</a>
<a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a>
<a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> <a href="javascript:void(0)" data-role="button" data-icon="gear">Gear</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-u">Up Arrow</a> <a href="javascript:void(0)" data-role="button" data-icon="arrow-d">Down Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="home">Home</a>
<a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a>
<a href="javascript:void(0)" data-role="button" data-icon="star">Star</a>
<a href="javascript:void(0)" data-role="button" data-icon="info">Info</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-icon="back">Back</a> 

Step 4: 页面执行的效果如下,下图是在 Windows Phone 手机上看到的效果:


jquery mobile - button icons

你也可以在手机中打开如下地址来查看实际效果:

http://www.osctools.net/jsbin/awlwhydj/1

Step 5: 创建另外一个 html 文件,重复上面第二个步骤来演示不带文本的按钮

Step 6: 将下列代码放在 body 块中

<li>Icons with no text</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-iconpos="notext">Check</a> 

Step 7: 下图是页面执行的效果:

jQuery Mobile - Button with no text

点击下面地址查看效果:

http://www.osctools.net/jsbin/whbvelkj/1

Step 8: 再创建另外的 html 页面,重复第二个步骤来暗示 Inline 按钮和按钮分组

Step 9: 将下列代码放在上一步 html 文件中的 body 标签内

<li>Inline</li>
<a href="javascript:void(0)" data-role="button" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-inline="true">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-inline="true">Check</a>

<li>Horizontal Grouping</li>

<div data-role="controlgroup" data-type="horizontal">
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 1</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
</div>

<li>Normal Grouping</li>

<div data-role="controlgroup">
   <a href="javascript:void(0)" data-role="button">Button 1</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
</div>

Step 10: 执行效果如下:

jQuery Mobile Button Inline and Button Grouping

在线演示:http://www.osctools.net/jsbin/gyjslcfi/1

Step 11: 演示无阴影、无圆角的图标定位按钮

Step 12: 代码如下

<li>No Shadow</li>

<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="plus" data-inline="true">Plus</a>

<li>No Corners</li>

<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="check" data-inline="true">Check</a>

<li>Icon Position</li>

<a href="javascript:void(0)" data-role="button" data-iconpos="right" data-icon="grid" data-inline="true">Grid</a>    
<a href="javascript:void(0)" data-role="button" data-iconpos="left" data-icon="forward" data-inline="true">Foward</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="bottom" data-icon="refresh" data-inline="true">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="top" data-icon="gear" data-inline="true">Gear</a> 

Step 12: 运行效果

jquery mobile Buttons with shadow no corners icon position

在线演示:http://www.osctools.net/jsbin/tikgjhgb/1

全文完!

英文原文OSCHINA原创翻译

加载中
0
justtear
justtear
LZ是WP上测试的...我blackberry 9300自带浏览器上咋看不到
0
铂金小鸟
铂金小鸟
在手机上反应好迟钝,按下等下才会出弹出效果,用的chrome
铂金小鸟
铂金小鸟
嗯,我测试了几款浏览器,firefox上表现最差。自带的浏览器按下居然没反应,手指松开才变色。表现最好的是海豚,手指松开能立马弹回,下来就是chrome,只是手指松开等一下才能弹回
红薯
红薯
不知道为什么,手机版的 chrome 对 jquery mobile 的支持奇差
0
麦麸子lee
麦麸子lee
最近要做这方面的开发,还在恶补jquery mobile的知识
0
恺哥
恺哥
感谢楼主,真是想啥来啥啊,刚刚看完jqm的文档,一上网就看到了这篇文章,好
0
产品哥
产品哥

安卓机 显示不出效果 iphone是ok的

 

0
帖子列表
帖子列表
红薯是全才吗?啥都会啊!?
0
朱__朱
朱__朱
手机上还是Opera Mobile最靠谱
十月的星空
十月的星空
我的程序使用Opera 直接打不开
0
五杀联盟
五杀联盟
opera也反应迟钝
0
蜗牛TT
蜗牛TT
  好东西,赞一个。虽然我不做这一块的开发,不过还是收藏一个。
0
Onedot
Onedot

JM确实有个比较致命伤-----响应体验不太好

但依然是最好的框架之一

返回顶部
顶部