一、下载jQuery Mobile

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

点击Download

下载如下zip包

下载成功后如下图

解压目录如图：

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

二、创建JQuery Mobile的Helloword

1、创建demo

2、新建站点

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

index.html

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

在Chrome浏览器中运行结果：

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

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

Java学习交流群142979499
Android学习交流群311273384

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

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

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

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

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

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

  9. 小强的HTML5移动开发之路（21）—— PhoneGap

    一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...

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

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...

随机推荐

  1. [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself

    One thing that we can do is to add styles directly to HTML elements that live within our component. ...

  2. ejs模板引擎的使用

    引入ejs.min.js 创建模板,以<%=jsCode%>包裹起来其余的html和html结构一样 focusTemplateData是模板使用的数据,使用$.each()方法遍历绑定数 ...

  3. WebService--CXF以及CXF与Spring的整合（jaxws:server形式配置）

    前言:好记性不如烂笔头,写博客的好处是,以前接触的东西即便忘记了,也可以从这里查找. Apache CXF 是一个开源的 Services 框架,CXF 帮助您利用 Frontend 编程 API 来 ...

  4. android开发-获取wifi列表

    近期博主在学frangment框架,因此想着想着就想通过listfragment完毕对wifi列表的获取. 好! 如今就不说废话了. 一.wifi的基础知识 在Android的官方文档中定义了例如以下 ...

  5. swift开发多线程篇 - NSThread 线程相关简单说明(一些使用和注意点)

    一 说明 本文涉及代码可以从https://github.com/HanGangAndHanMeimei/Code地址获得. 二 NSThread的基本使用和创建 1)基本用法(主线程|当前线程) 1 ...

  6. amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  7. Microsoft iSCSI Software Target 快照管理

    Microsoft iSCSI Software Target 支持快照管理,可以对设备进行手工创建快照.快照任务计划.快照回滚等操作. 首先配置iscsi 目标及设备映射关系,并在客户端通过发起程序 ...

  8. [TypeScript] Interface and Class

    When to use Interface and when to use Class. Let's see one example: export interface Lesson { course ...

  9. TreeView控件的展开与折叠

    在窗体中添加一个TreeView控件,设置CheckBox属性为True,绑定数据 Archive jkj = new Archive();//自定义类        public void Bind ...

  10. 【38.02%】【codeforces 625B】War of the Corporations

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...