在这篇文章中我们将详细介绍 jQuery Mobile 的按钮。在 jQuery Mobile 中所有按钮的样式一般都是文本居中,圆角,有阴影的效果,还包括一个可选的图标。
让我们来看看这些按钮是如何工作的。
Step 1: 首先创建一个 .html 页面来演示 jQuery Mobile 的按钮图标
Step 2: .html 的页面内容如下,这里我们使用了 Microsoft CDN
03 |
< html xmlns = "http://www.w3.org/1999/xhtml" >
|
05 |
< meta charset = "utf-8" />
|
06 |
< meta name = "viewport" content = "width=device-width, initial-scale=1" />
|
08 |
< script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type = "text/javascript" ></ script >
|
09 |
< script src = "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type = "text/javascript" ></ script >
|
10 |
< link href = "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel = "stylesheet" type = "text/css" />
|
11 |
< 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" />
|
Step 3: 然后将下列代码放在 .html 页面的 body 块中
03 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "delete" >Delete</ a >
|
04 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "plus" >Plus</ a >
|
05 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "minus" >Minus</ a >
|
06 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "check" >Check</ a >
|
07 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "grid" >Grid</ a >
|
08 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "forward" >Foward</ a >
|
09 |
< 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 >
|
10 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "arrow-l" >Left Arrow</ a >
|
11 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "arrow-r" >Right Arrow</ a >
|
12 |
< 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 >
|
13 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "home" >Home</ a >
|
14 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "alert" >Alert</ a >
|
15 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "star" >Star</ a >
|
16 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "info" >Info</ a >
|
17 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "refresh" >Refresh</ a >
|
18 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "back" >Back</ a >
|
Step 4: 页面执行的效果如下,下图是在 Windows Phone 手机上看到的效果:
你也可以在手机中打开如下地址来查看实际效果:
http://www.osctools.net/jsbin/awlwhydj/1
Step 5: 创建另外一个 html 文件,重复上面第二个步骤来演示不带文本的按钮
Step 6: 将下列代码放在 body 块中
1 |
< li >Icons with no text</ li >
|
3 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "delete" data-iconpos = "notext" >Delete</ a >
|
4 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "plus" data-iconpos = "notext" >Plus</ a >
|
5 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "minus" data-iconpos = "notext" >Minus</ a >
|
6 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "check" data-iconpos = "notext" >Check</ a >
|
Step 7: 下图是页面执行的效果:
点击下面地址查看效果:
http://www.osctools.net/jsbin/whbvelkj/1
Step 8: 再创建另外的 html 页面,重复第二个步骤来暗示 Inline 按钮和按钮分组
Step 9: 将下列代码放在上一步 html 文件中的 body 标签内
02 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "delete" data-inline = "true" >Delete</ a >
|
03 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "plus" data-inline = "true" >Plus</ a >
|
04 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "minus" data-inline = "true" >Minus</ a >
|
05 |
< a href = "javascript:void(0)" data-role = "button" data-icon = "check" data-inline = "true" >Check</ a >
|
07 |
< li >Horizontal Grouping</ li >
|
09 |
< div data-role = "controlgroup" data-type = "horizontal" >
|
10 |
< a href = "javascript:void(0)" data-role = "button" data-inline = "true" >Button 1</ a >
|
11 |
< a href = "javascript:void(0)" data-role = "button" data-inline = "true" >Button 2</ a >
|
12 |
< a href = "javascript:void(0)" data-role = "button" data-inline = "true" >Button 2</ a >
|
15 |
< li >Normal Grouping</ li >
|
17 |
< div data-role = "controlgroup" >
|
18 |
< a href = "javascript:void(0)" data-role = "button" >Button 1</ a >
|
19 |
< a href = "javascript:void(0)" data-role = "button" >Button 2</ a >
|
20 |
< a href = "javascript:void(0)" data-role = "button" >Button 2</ a >
|
Step 10: 执行效果如下:
在线演示:http://www.osctools.net/jsbin/gyjslcfi/1
Step 11: 演示无阴影、无圆角的图标定位按钮
Step 12: 代码如下
03 |
< a href = "javascript:void(0)" data-role = "button" data-shadow = "false" data-icon = "delete" data-inline = "true" >Delete</ a >
|
04 |
< a href = "javascript:void(0)" data-role = "button" data-shadow = "false" data-icon = "plus" data-inline = "true" >Plus</ a >
|
08 |
< a href = "javascript:void(0)" data-role = "button" data-corners = "false" data-icon = "minus" data-inline = "true" >Minus</ a >
|
09 |
< a href = "javascript:void(0)" data-role = "button" data-corners = "false" data-icon = "check" data-inline = "true" >Check</ a >
|
11 |
< li >Icon Position</ li >
|
13 |
< a href = "javascript:void(0)" data-role = "button" data-iconpos = "right" data-icon = "grid" data-inline = "true" >Grid</ a >
|
14 |
< a href = "javascript:void(0)" data-role = "button" data-iconpos = "left" data-icon = "forward" data-inline = "true" >Foward</ a >
|
15 |
< a href = "javascript:void(0)" data-role = "button" data-iconpos = "bottom" data-icon = "refresh" data-inline = "true" >Refresh</ a >
|
16 |
< a href = "javascript:void(0)" data-role = "button" data-iconpos = "top" data-icon = "gear" data-inline = "true" >Gear</ a >
|
Step 12: 运行效果
在线演示:http://www.osctools.net/jsbin/tikgjhgb/1
原文链接:http://www.oschina.net/question/12_63642
分享到:
相关推荐
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
JqueryMobile 按钮图标,各类不同的图标,省去您找图标,按钮的烦恼。
jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位
jQuery mobile开关式按键,仿苹果
第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用;第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介 1.1 通用访问 ...
jqueryMobile插件仿iPhone滑动出现删除按钮,供大家一起共同分享学习。
作为jquery mobile的入门级读物,《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性,内容系统全面,便于理解。 《jquery mobile快速入门》总共分为10章,内容包括jquery mobile的基础...
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
jQuery Mobile快速入门,美国,BRAD BROULIK著,巩亚萍姚婷翻译,人民邮电出版社出版,全书10章,234页。1jquerymobile简介,2jquerymobile入门,3使用页眉工具栏和标签来导航,4表单元素和按钮
JQuery Mobile教程
从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...
《jquery mobile快速入门》总共分为10章,内容包括jquerymobile的基础知识;使用页眉、工具栏和标签栏进行导航;表单元素和按钮;列表视图;使用表格和css渐变来格式化内容;创建可主题化的设计;jquerymobile api;...
从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...
《jQueryMobile即学即用》着眼于移动Web应用开发实战,从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和...