HTML5移动开发之路（23）—— jQuery Mobile入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（23）—— jQuery Mobile入门

一、下载jQuery Mobile

下载地址：http://jquerymobile.com/

点击Download

下载如下zip包

下载成功后如下图

解压目录如图：

点击index.html进入demo主页，这里面有很多例子。

二、创建JQuery Mobile的Helloword

1、创建demo

2、新建站点

3、站点建立成功后将生成的demo拷贝到站点中

index.html

[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-1.3.2.min.css" rel="stylesheet" type="text/css"/>
  7. <script src="jquery.js" type="text/javascript"></script>
  8. <script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11. <div data-role="page" id="page">
  12. <div data-role="header">
  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. </ul>
  21. </div>
  22. <div data-role="footer">
  23. <h4>页面脚注</h4>
  24. </div>
  25. </div>
  26. <div data-role="page" id="page2">
  27. <div data-role="header">
  28. <h1>第 2 页</h1>
  29. </div>
  30. <div data-role="content">
  31. 内容
  32. </div>
  33. <div data-role="footer">
  34. <h4>页面脚注</h4>
  35. </div>
  36. </div>
  37. <div data-role="page" id="page3">
  38. <div data-role="header">
  39. <h1>第 3 页</h1>
  40. </div>
  41. <div data-role="content">
  42. 内容
  43. </div>
  44. <div data-role="footer">
  45. <h4>页面脚注</h4>
  46. </div>
  47. </div>
  48. <div data-role="page" id="page4">
  49. <div data-role="header">
  50. <h1>第 4 页</h1>
  51. </div>
  52. <div data-role="content">
  53. 内容
  54. </div>
  55. <div data-role="footer">
  56. <h4>页面脚注</h4>
  57. </div>
  58. </div>
  59. </body>
  60. </html>

在Chrome浏览器中运行结果：

打包成apk在真实手机上的效果如下：

两个demo打包下载：http://download.csdn.net/detail/lxq_xsyu/6865877

时间： 2024-10-02 10:07:39

HTML5移动开发之路（23）—— jQuery Mobile入门的相关文章

jQuery Mobile入门经典 ([美] Phil Dutson) 中文pdf扫描版

jQury Mobile是以全球最流行的jQuery为核心的跨平台移动Web应用开发框架,自从诞生以来,就赢得了业内专家和技术社区的强烈关注.<jQuery Mobile入门经典>采用直观.循序渐进的方法讲解了如何借助jQuery Mobile,通过一个单一的代码库来创建适合各种移动设备的移动应用.<jQuery Mobile入门经典>分为4部分:第1部分介绍了jQuery Mobile的基础入门知识:第2部分讲解了用户界面相关的知识,读者将学到如何使用jQuery Mobile来

HTML5移动开发之路（34）——jQuery中的选择器

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(34)--jQuery中的选择器 一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多JavaScript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师.著有<Pro JavaScript Techniques>(即<精通JavaScript>)等经典JavaScript书籍. jQu

HTML5移动开发之路（35）——jQuery中的过滤器详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(35)--jQuery中的过滤器详解 1.基本过滤选择器 :first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的 :lt(index) :比他小的 [html] view plain copy print? <html> <head> <script src=&quo

HTML5移动开发之路（36）——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

小强的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