Jquery Mobile简介：
jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序。jQuery Mobile 框架构建于 jQuery 内核之上，提供几个功能，包括 HTML 和 XML 文档对象模型（DOM）的操控、处理事件、使用 Ajax 执行服务器通信、以及用于 web 页面的动画和图像效果。这个移动框架本身是独立于 jQuery 内核（缩小或压缩后大约 25KB）的一个额外下载（缩小或压缩后大约 12KB）。与 jQuery 框架的其余部分一样，jQuery Mobile 是一个免费的、双许可（MIT 和 GPL）库。
在本文撰写之时，jQuery Mobile 框架处于 Alpha 2 version (v1.0a2)。代码处于草案阶段，可能会更改。但是，现有的框架非常坚固。鉴于在 alpha 发布中就有一个令人印象深刻的组件集可用，jQuery Mobile 有望成为一个优秀的移动 web 应用程序开发框架和工具集。
jQuery Mobile 的基本特性包括：
Jquery Mobile 开发环境搭建
使用jQueryMobile的第一步，先创建一个html页面，并在head标签中加入以下内容：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
正如你在代码中看到的，jQueryMobile是jQuery的一个扩展。目前来说，压缩后的jQuerymobile仅12Kb。
上面的代码均来自jQuery的CDN服务器，css文件中也包含必需的图片链接，如果你需要在你自己的服务器上运行，可以下载相关的文件解压缩后部署到你的服务器。
Jquery Mobile开发示列一：
在创建第一个jQueryMobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1></div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p></div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4></div><!-- /header --></div><!-- /page -->效果截图：
代码说明：
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容
在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
| div dat-role=”header”></div> |
在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性 data-position=”fixed”，可以保证头部始终保持屏幕的顶部 |
| <div dat-role=”content”></div> |
包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等 |
| <div dat-role=”footer”></div> |
在页面的底建立工具栏，添加一些功能按钮 为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性 |
Jquery Mobile开发示列二：多个页面切换
有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Pages within Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="content"><p><a href="#about">About this app</a></p></div>
</div>
<div data-role="page" id="about">
<div data-role="header"><h1>About This App</h1></div>
<div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
</div>
</body>
</html>