Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 77034
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（44）——JqueryMobile中的按钮

分类： HTML5

2016-11-15 14:02:55

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（44）——JqueryMobile中的按钮

一、链接按钮

 

[html] view plain copy
 
 print?
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序title>  
  6. <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript">script>  
  8. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript">script>  
  9. head>   
  10. <body>  
  11. <div data-role="page" id="page1" data-fullscreen="true">  
  12.     <div data-role="content">  
  13.         <a href="#" data-role="button">链接按钮a>  
  14.     div>  
  15. div>  
  16. body>  
  17. html>  

 

二、表单按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <div data-role="page" id="page1" data-fullscreen="true">  
  2.     <div data-role="content">  
  3.         <a href="#" data-role="button">链接按钮a>  
  4.         <form>  
  5.             <input type="button" value="表单按钮"/>  
  6.             <button type="submit">提交按钮button>  
  7.             <input type="submit" value="提交按钮"/>  
  8.             <input type="reset" value="重置按钮"/>  
  9.         form>  
  10.     div>  
  11. div>  

 

三、图形按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. 图像按钮1:  
  2. <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>  
  3. 图像按钮2：  
  4. <a href="#"><img src="jquery-mobile/images/icon.png">a>  

 

四、带图标的按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1.     <input type="button" value="带图标的按钮" data-icon="delete"/>  
  2. <input type="button"  data-icon="delete" data-iconpos="notext"/>  
  3. <input type="button"  data-icon="alert" data-iconpos="notext"/>  
  4.     <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>  
  5.     <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>  
  6.     <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>  
  7.     <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>  
  8.     <input type="button"  data-icon="back" data-iconpos="notext"/>  
  9.     <input type="button"  data-icon="check" data-iconpos="notext"/>  
  10.     <input type="button"  data-icon="custom" data-iconpos="notext"/>  
  11.     <input type="button"  data-icon="forward" data-iconpos="notext"/>  
  12.     <input type="button"  data-icon="gear" data-iconpos="notext"/>  
  13.     <input type="button"  data-icon="grid" data-iconpos="notext"/>  
  14.     <input type="button"  data-icon="home" data-iconpos="notext"/>  
  15.     <input type="button"  data-icon="info" data-iconpos="notext"/>  
  16.     <input type="button"  data-icon="minus" data-iconpos="notext"/>  
  17.     <input type="button"  data-icon="plus" data-iconpos="notext"/>  
  18.     <input type="button"  data-icon="refresh" data-iconpos="notext"/>  
  19.     <input type="button"  data-icon="search" data-iconpos="notext"/>  
  20.     <input type="button"  data-icon="star" data-iconpos="notext"/>  

 

五、按钮定位

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">topa>  
  2. <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">lefta>  
  3. <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">righta>  
  4. <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottoma>  

 

六、自定义图标按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <a href="#" data-role="button" data-icon="custom_icon">自定义图标a>  
[css] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. .ui-icon-custom_icon{  
  2.     background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;  
  3.     background-size:14px 14px;  
  4. }  

注意：属性命名规则“.ui-icon-,如上面的.ui-icon-custom_icon

 



七、分组按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">  
  2.     <a href="#" data-role="button" class="ui-control-active">菜单一a>  
  3.     <a href="#" data-role="button" class="ui-control-inactive">菜单二a>  
  4.     <a href="#" data-role="button" class="ui-control-inactive">菜单三a>  
  5. div>  

 

八、主题按钮

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <a href="#" data-role="button" data-theme="a">Aa>  
  2. <a href="#" data-role="button" data-theme="b">Ba>  
  3. <a href="#" data-role="button" data-theme="c">Ca>  
  4. <a href="#" data-role="button" data-theme="d">Da>  
  5. <a href="#" data-role="button" data-theme="e">Ea>  
  6. <a href="#" data-role="button" data-theme="f">Fa>  


九、动态按钮

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.     $('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮a>').appendTo("#content").button();  
  3.     $('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮a>').insertAfter("#b1").button();  
  4. script>  

还有一种json方式的

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $('<a href="#">动态按钮a>').insertAfter("#a1").button({  
  2.         'icon':'home',  
  3.         'inline':true,  
  4.         'shadow':true,  
  5.         'theme':'b'  
  6.     });  

上面两种方式都用到了button()插件，button插件具有如下选项：

 

corners  boolean

icon string

iconpos string

iconshadow boolean

initSelector  css selector string

inline boolean

shadow boolean

button插件有如下两个方法：

$("#button1").button("enable");

$("#button2").button("disable");

全部代码如下：

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序title>  
  6. <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript">script>  
  8. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript">script>  
  9. <style type="text/css">  
  10. .ui-icon-custom_icon{  
  11.     background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;  
  12.     background-size:14px 14px;  
  13. }  
  14. style>  
  15. head>   
  16. <body>  
  17. <div data-role="page" id="page1" data-fullscreen="true">  
  18.     <div data-role="content" class="content" id="content">  
  19.         <a href="#" data-role="button">链接按钮a>  
  20.         <form>  
  21.             <input type="button" value="表单按钮"/>  
  22.             <button type="submit">提交按钮button>  
  23.             <input type="submit" value="提交按钮"/>  
  24.             <input type="reset" value="重置按钮"/>  
  25.             图像按钮1:  
  26.             <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>  
  27.             图像按钮2：  
  28.             <a href="#"><img src="jquery-mobile/images/icon.png">a>  
  29.               
  30.             <input type="button" value="带图标的按钮" data-icon="delete"/>  
  31.             <input type="button"  data-icon="delete" data-iconpos="notext"/>  
  32.             <input type="button"  data-icon="alert" data-iconpos="notext"/>  
  33.             <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>  
  34.             <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>  
  35.             <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>  
  36.             <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>  
  37.             <input type="button"  data-icon="back" data-iconpos="notext"/>  
  38.             <input type="button"  data-icon="check" data-iconpos="notext"/>  
  39.             <input type="button"  data-icon="custom" data-iconpos="notext"/>  
  40.             <input type="button"  data-icon="forward" data-iconpos="notext"/>  
  41.             <input type="button"  data-icon="gear" data-iconpos="notext"/>  
  42.             <input type="button"  data-icon="grid" data-iconpos="notext"/>  
  43.             <input type="button"  data-icon="home" data-iconpos="notext"/>  
  44.             <input type="button"  data-icon="info" data-iconpos="notext"/>  
  45.             <input type="button"  data-icon="minus" data-iconpos="notext"/>  
  46.             <input type="button"  data-icon="plus" data-iconpos="notext"/>  
  47.             <input type="button"  data-icon="refresh" data-iconpos="notext"/>  
  48.             <input type="button"  data-icon="search" data-iconpos="notext"/>  
  49.             <input type="button"  data-icon="star" data-iconpos="notext"/>  
  50.               
  51.             <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">topa>  
  52.             <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">lefta>  
  53.             <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">righta>  
  54.             <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottoma>  
  55.               
  56.             <a href="#" data-role="button" data-icon="custom_icon">自定义图标a>  
  57.               
  58.             <a href="#" data-role="button" data-theme="a">Aa>  
  59.             <a href="#" data-role="button" data-theme="b">Ba>  
  60.             <a href="#" data-role="button" data-theme="c">Ca>  
  61.             <a href="#" data-role="button" data-theme="d">Da>  
  62.             <a href="#" data-role="button" data-theme="e" id="a1">Ea>  
  63.             <a href="#" data-role="button" data-theme="f" id="b1">Fa>  
  64.         form>  
  65.     div>  
  66. div>  
  67. body>  
  68. <script type="text/javascript">  
  69.     $('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮a>').appendTo("#content").button();  
  70.     $('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮a>').insertAfter("#b1").button();  
  71.     $('<a href="#">动态按钮a>').insertAfter("#a1").button({  
  72.             'icon':'home',  
  73.             'inline':true,  
  74.             'shadow':true,  
  75.             'theme':'b'  
  76.         });  
  77. script>  
  78. html>  
阅读(932) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

下一篇：HTML5移动开发之路（45）——汇率计算器【1】

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6