JqueryMobile学习之一---初识jquerymobile(JQM的基本页面结构及页面切换
jQuery Mobile 基本页面结构
大部分jQuery Mobile Web应用程序都要遵循下面的基本模板
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容
- CSS文件jquery.mobile-1.0a1.min.css
- jQuery library jquery-1.4.3.min.js
- jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
| <div data-role=”header”></div> |
在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性 data-position=”fixed”，可以保证头部始终保持屏幕的顶部 |
| <div data-role=”content”></div> |
包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等 |
| <div data-role=”footer”></div> |
在页面的底建立工具栏，添加一些功能按钮 为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性 |
多个页面在同一个页面中
有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug)
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>jQuery Mobile: Pages within Pages</title> 8 9 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 10 11 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 12 13 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 14 15 </head> 16 17 <body> 18 19 20 21 <div data-role="page" id="home"> 22 23 24 25 <div data-role="header"> 26 27 <h1>Home</h1> 28 29 </div> 30 31 32 33 <div data-role="content"> 34 35 <p><a href="#about">About this app</a></p> 36 37 </div> 38 39 40 41 </div> 42 43 44 45 <div data-role="page" id="about"> 46 47 48 49 <div data-role="header"> 50 51 <h1>About This App</h1> 52 53 </div> 54 55 56 57 <div data-role="content"> 58 59 <p>This app rocks! <a href="#home">Go home</a></p> 60 61 </div> 62 63 64 65 </div> 66 67 68 69 </body> 70 71 </html>
正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”
AJAX 导航
为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。
这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性
页面切换效果
你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下
| slide |
从右到左切换（默认） |
| slideup |
从下到上切换 |
| slidedown |
从上到下切换 |
| pop |
以弹出的形式打开一个页面 |
| fade |
渐变退色的方式切换 |
| flip |
旧页面翻转飞出，新页面飞入 |
例如
<p><a href=”#about” data-transition=”flip”>关于页面</a></p>
在浏览器中查看效果
注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。