HTML5移动开发之路（44）——JqueryMobile中的按钮

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

一、链接按钮

[html] view plain copy

print?

  1. <!DOCTYPE html>
  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?

  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?

  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?

  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?

  1. <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
  2. <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
  3. <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
  4. <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>

六、自定义图标按钮

[html] view plain copy

print?

  1. <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>

[css] view plain copy

print?

  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-<data-icon-value>,如上面的.ui-icon-custom_icon

七、分组按钮

[html] view plain copy

print?

  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?

  1. <a href="#" data-role="button" data-theme="a">A</a>
  2. <a href="#" data-role="button" data-theme="b">B</a>
  3. <a href="#" data-role="button" data-theme="c">C</a>
  4. <a href="#" data-role="button" data-theme="d">D</a>
  5. <a href="#" data-role="button" data-theme="e">E</a>
  6. <a href="#" data-role="button" data-theme="f">F</a>


九、动态按钮

[html] view plain copy

print?

  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?

  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?

  1. <!DOCTYPE html>
  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. <input type="button" value="带图标的按钮" data-icon="delete"/>
  30. <input type="button"  data-icon="delete" data-iconpos="notext"/>
  31. <input type="button"  data-icon="alert" data-iconpos="notext"/>
  32. <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>
  33. <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>
  34. <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>
  35. <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>
  36. <input type="button"  data-icon="back" data-iconpos="notext"/>
  37. <input type="button"  data-icon="check" data-iconpos="notext"/>
  38. <input type="button"  data-icon="custom" data-iconpos="notext"/>
  39. <input type="button"  data-icon="forward" data-iconpos="notext"/>
  40. <input type="button"  data-icon="gear" data-iconpos="notext"/>
  41. <input type="button"  data-icon="grid" data-iconpos="notext"/>
  42. <input type="button"  data-icon="home" data-iconpos="notext"/>
  43. <input type="button"  data-icon="info" data-iconpos="notext"/>
  44. <input type="button"  data-icon="minus" data-iconpos="notext"/>
  45. <input type="button"  data-icon="plus" data-iconpos="notext"/>
  46. <input type="button"  data-icon="refresh" data-iconpos="notext"/>
  47. <input type="button"  data-icon="search" data-iconpos="notext"/>
  48. <input type="button"  data-icon="star" data-iconpos="notext"/>
  49. <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
  50. <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
  51. <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
  52. <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>
  53. <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>
  54. <a href="#" data-role="button" data-theme="a">A</a>
  55. <a href="#" data-role="button" data-theme="b">B</a>
  56. <a href="#" data-role="button" data-theme="c">C</a>
  57. <a href="#" data-role="button" data-theme="d">D</a>
  58. <a href="#" data-role="button" data-theme="e" id="a1">E</a>
  59. <a href="#" data-role="button" data-theme="f" id="b1">F</a>
  60. </form>
  61. </div>
  62. </div>
  63. </body>
  64. <script type="text/javascript">
  65. $(‘<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>‘).appendTo("#content").button();
  66. $(‘<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>‘).insertAfter("#b1").button();
  67. $(‘<a href="#">动态按钮</a>‘).insertAfter("#a1").button({
  68. ‘icon‘:‘home‘,
  69. ‘inline‘:true,
  70. ‘shadow‘:true,
  71. ‘theme‘:‘b‘
  72. });
  73. </script>
  74. </html>
时间： 2024-08-07 04:23:36

HTML5移动开发之路（44）——JqueryMobile中的按钮的相关文章

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路（50）——jquerymobile页面初始化过程

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(50)--jquerymobile页面初始化过程 了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: [html] view plain copy print? <!DOCTYPE html> <html> <head> <title>练习</title

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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航 一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="

小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=