在Jquery Mobile中，一个页面"就是一个data-role属性被设为"page"的容器(通常为div容器)，里面包含了"header", "content",“footer"三个容器，各自可以容纳普通的html元素，表单和自定义的Jquery Mobile组件
1、一个标准的Jquery Mobile页面的样板。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script> <script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script> </head> <body> <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><!-- /footer --> </div><!-- /page --> </body> </html>
2、想要支持中文，添加以下meta标签。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3、一个页面中包含多个页面，支持Ajax的跳转的页面。
<body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p><a href="#foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body>
4、后退链接属性。(后退的行为，会无视链接的herf) data-rel="back"
<a href="index.html" data-rel="back">后退</a>
5、页面跳转效果属性。 data-transition="*"
<a href="index.html" data-transition="pop">跳转</a>
- data-transition="fade"
- data-transition="pop"
- data-transition="flip"
- data-transition="turn"
- data-transition="flow"
- data-transition="slidefade"
- data-transition="slide"
- data-transition="slideup"
- data-transition="slidedown"
- data-transition="none"
6、在页面上层的弹出对话框属性。 data-rel="dialog"
<a href="foo.html" data-rel="dialog">Open dialog</a>
7、页面预加载属性。data-prefetch
<a href="prefetchThisPage.html" data-prefetch> ... </a>
你可以预加载随意多个页面，只需要将要预加载的链接加上data-prefetch属性。或者你，可以在js里调用$.mobile.loadPage()方法来设置预加载。
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
8、不使用jQuery Mobel 提供的 DOM 缓存机制属性。data-dom-cache="true"
<div data-role="page" id="cacheMe" data-dom-cache="true">
通过js控制。
$.mobile.page.prototype.options.domCache = true;
通过程序控制。
pageContainerElement.page({ domCache: true });
DOM缓存的缺点是DOM可能会变得很大，某些设备上会导致变慢或者内存问题。