一、下载jQuery Mobile

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

点击Download

下载如下zip包

下载成功后如下图

解压目录如图：

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

二、创建JQuery Mobile的Helloword

1、创建demo

2、新建站点

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

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Mobile Web 应用程序</title>

<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

</head>

<body> 

<div data-role="page" id="page">

	<div data-role="header">

		<h1>第 1 页</h1>

	</div>

	<div data-role="content">

		<ul data-role="listview">

			<li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

		</ul>

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page2">

	<div data-role="header">

		<h1>第 2 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page3">

	<div data-role="header">

		<h1>第 3 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page4">

	<div data-role="header">

		<h1>第 4 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

</body>

</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. Django环境搭建（一）

    搭建Django环境之前先搭建python运行环境 需要了解: 解释器(编译器): 计算机不能直接理解任何除机器语言外的其他语言,所以程序员必须要把自己写的语言翻译成机器语言,而将其他语言翻译成机器语 ...

  2. 图灵机器人API，适用于微信、微博、QQ群、智能硬件等

    该API有智能聊天.查天气.查快递.查菜谱.查车票.查航班.查出行.查周边等近500个功能,能够用在微信公众平台.QQ群.手机语音助手.智能硬件等领域\ [1].[代码] [PHP]代码 跳至 [1] ...

  3. VIP的转移

    首先查看vip在各个节点的状态 [root@rac2 ~]# ifconfig eth0 Link encap:Ethernet HWaddr 08:00:27:C9:28:D0 inet addr: ...

  4. 用多年前据说买买提上理论水平最高的帖子做镇楼贴---NASA有吹牛了

    美国国会一直有意把nasa 划入国防部,取消太空探索所关联的部门,因为这些部门都是些烧钱的大包袱,而把具有军事意义的部门留下.国会想把烧钱部卖给google,可能是要价太高,最后没有谈拢,不了了之.但 ...

  5. GCJ 2009 Round 2 Problem A. Crazy Rows

    https://code.google.com/codejam/contest/204113/dashboard 题目大意: 给你一个矩阵,让你转化为下三角矩阵,每次只能交换相邻的行,求最小的交换次数 ...

  6. GO语言学习（四）GO语言语言结构

    Go Hello World 实例 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 & 表达式 注释 接下来让我们来看下简单的代码,该代码输出了"Hello ...

  7. IOS总结

    1.Difference between shallow copy and deep copy?
浅复制和深复制的区别?
答案:浅层复制:只复制指向对象的指针,而不复制引用对象本身.
深层复制:复制引 ...

  8. （素材源代码） 猫猫学IOS（五）UI之360等下载管理器九宫格UI

    猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u0 ...

  9. linux 内核源代码目录结构

    /arch:目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一般都基于此目录. / ...

  10. 【SPOJ 694】Distinct Substrings (更直接的求法)

    [链接]h在这里写链接 [题意] 接上一篇文章 [题解] 一个字符串所有不同的子串的个数=∑(len-sa[i]-height[i]) [错的次数] 0 [反思] 在这了写反思 [代码] #inclu ...