jQuery Mobile
定义：是一种为触控优化的web框架，用于创建移动web 应用程序
适用于所有流行的智能手机和平板电脑
使用HTML5、CSS3、JavaScript、AJAX，通过尽可能少的代码来完成对页面的布局
优点：会自动为网页设计交互的易用外观，并能在所有移动设计上保持一致
使用：从 http://jquerymobile.com/download/ 下载资源库
从 CDN 引用 jQuery Mobile:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
基本属性定义： data-role="page" //显示在浏览器中的页面 <div data-role="page">....</div>
data-role="header" //创建页面上方的工具栏 （常用于标题和搜索按钮） <div data-role="header">....</div>
data-role="content" // 真正定义页面的内容 <div data-role="content">....</div>
data-role="footer" //创建页面底部的工具栏 <div data-role="footer">....</div>
data-rel="dialog" //添加在链接处，此时用户点击该链接时，会以对话框形式呈现将要跳转的页面
<a href="#otherLink" data-role="dialog">....</a>
<h1>标题</h1> // h1-h6是标题
p.s. HTML5 data-* 属性用于通过 jQuery Mobile，为移动设备创建 “对触控友好的”交互外观。
e.g. <!DOCTYPE html>
<html>
<head>
........// CDN 引用 jQuery Mobile
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>这是page1</h1>
</div>
<div data-role="content">
<a href="#page2">跳转到页面二</a>
<a href="#page3" data-rel="dialog">对话框弹出页面二</a>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>这是page2</h1>
</div>
<div data-role="content">
<a href="#page1">跳转到页面一</a>
<a href="externalFile.html">跳转到外部页面</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>这是page3</h1>
</div>
<div data-role="content">
<a href="#page1">跳转到页面一</a>
</div>
</div>
</body>
</html>
