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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

一、页眉

1、添加页眉和页脚

[html] view plain copy

print?

  1. <div data-role="header">
  2. <h1>第 1 页</h1>
  3. </div>

[html] view plain copy

print?

  1. <div data-role="footer">
  2. <h4>页面脚注</h4>
  3. </div>

默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉

[html] view plain copy

print?

  1. <div data-role="header" data-position="fixed">
  2. <h1>第 1 页</h1>
  3. </div>

[java] view plain copy

print?

  1. <div data-role="footer" data-position="fixed">
  2. <h4>页面脚注</h4>
  3. </div>

可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"

[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="page">
  12. <div data-role="header" data-position="fixed">
  13. <h1>第 1 页</h1>
  14. </div>
  15. <div data-role="content">
  16. <ul data-role="listview">
  17. <li><a href="#page2">第 2 页</a></li>
  18. <li><a href="#page3">第 3 页</a></li>
  19. <li><a href="#page4">第 4 页</a></li>
  20. <li><a href="#page2">第 2 页</a></li>
  21. <li><a href="#page3">第 3 页</a></li>
  22. <li><a href="#page4">第 4 页</a></li>
  23. <li><a href="#page2">第 2 页</a></li>
  24. <li><a href="#page3">第 3 页</a></li>
  25. <li><a href="#page4">第 4 页</a></li>
  26. <li><a href="#page2">第 2 页</a></li>
  27. <li><a href="#page3">第 3 页</a></li>
  28. <li><a href="#page4">第 4 页</a></li>
  29. <li><a href="#page2">第 2 页</a></li>
  30. <li><a href="#page3">第 3 页</a></li>
  31. <li><a href="#page4">第 4 页</a></li>
  32. <li><a href="#page2">第 2 页</a></li>
  33. <li><a href="#page3">第 3 页</a></li>
  34. <li><a href="#page4">第 4 页</a></li>
  35. <li><a href="#page2">第 2 页</a></li>
  36. <li><a href="#page3">第 3 页</a></li>
  37. <li><a href="#page4">第 4 页</a></li>
  38. <li><a href="#page2">第 2 页</a></li>
  39. <li><a href="#page3">第 3 页</a></li>
  40. <li><a href="#page4">第 4 页</a></li>
  41. </ul>
  42. </div>
  43. <div data-role="footer" data-position="fixed">
  44. <h4>页面脚注</h4>
  45. </div>
  46. </div>
  47. <div data-role="page" id="page2">
  48. <div data-role="header">
  49. <h1>第 2 页</h1>
  50. </div>
  51. <div data-role="content">
  52. 内容
  53. </div>
  54. <div data-role="footer">
  55. <h4>页面脚注</h4>
  56. </div>
  57. </div>
  58. <div data-role="page" id="page3">
  59. <div data-role="header">
  60. <h1>第 3 页</h1>
  61. </div>
  62. <div data-role="content">
  63. 内容
  64. </div>
  65. <div data-role="footer">
  66. <h4>页面脚注</h4>
  67. </div>
  68. </div>
  69. <div data-role="page" id="page4">
  70. <div data-role="header">
  71. <h1>第 4 页</h1>
  72. </div>
  73. <div data-role="content">
  74. 内容
  75. </div>
  76. <div data-role="footer">
  77. <h4>页面脚注</h4>
  78. </div>
  79. </div>
  80. </body>
  81. </html>


在页面容器中添加data-fullscreen="true"后点击屏幕会出现页眉页脚，再次点击会消失。

二、添加返回按钮

[html] view plain copy

print?

  1. <div data-role="header" data-position="fixed">
  2. <a href="#" data-icon="back">返回</a>
  3. <h1>第 1 页</h1>
  4. <a href="#" data-icon="plus" data-iconpos="notext"/>
  5. </div>

左边是文本图标按钮，右边是纯图标按钮。

三、添加分段工具栏

[html] view plain copy

print?

  1. <div data-role="header" data-position="fixed">
  2. <a href="#" data-icon="back">返回</a>
  3. <h1>第 1 页</h1>
  4. <a href="#" data-icon="plus" data-iconpos="notext"/>
  5. <div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">
  6. <a href="#" data-role="button" class="ui-control-active">菜单一</a>
  7. <a href="#" data-role="button" class="ui-control-inactive">菜单二</a>
  8. <a href="#" data-role="button" class="ui-control-inactive">菜单三</a>
  9. </div>
  10. </div>

[css] view plain copy

print?

  1. <style style="text/css">
  2. .segment-control{text-align:center;margin:0.2em;}
  3. .ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}
  4. .ui-control-active{background:#BBB;}
  5. .ui-control-inactive{background:#DDD;}
  6. </style>

四、标签导航栏

[html] view plain copy

print?

  1. <div data-role="footer" data-position="fixed">
  2. <div data-role="navbar">
  3. <ul>
  4. <li><a href="#" data-icon="arrow-l">A</a></li>
  5. <li><a href="#" data-icon="back">B</a></li>
  6. <li><a href="#" data-icon="star">C</a></li>
  7. <li><a href="#" data-icon="plus">D</a></li>
  8. <li><a href="#" data-icon="arrow-r">E</a></li>
  9. </ul>
  10. </div>
  11. </div>

时间： 2024-10-02 00:13:12

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

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

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

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

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

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移动开发之路（51）——jquerymobile中改善页面访问速度

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

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

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

小强的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移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=