HTML 页眉部分加载三个重要的 jQuery Mobile 组件：
- jQuery Core 库 — 核心 jQuery 库
- jQuery Mobile 库 — jQuery 框架特定于移动的部分
- jQuery Mobile CSS — 定义核心 jQuery Mobile UI 元素的 CSS，它定义过渡和不同的 UI 小部件，比如滑块和按钮，大量使用 Webkit 变形和动画。
- jQuery Mobile theme CSS — 可选项
$.mobile and supported methods and events
jQuery Mobile新增加的tag属性
| Component | HTML5 data-* attribute |
|---|---|
| Header, Footer toolbars | <div data-role="header"> <div data-role="footer"> |
| Content body | <div data-role="content"> |
| Buttons | <a href="index.html" data-role="button" data-icon="info">Button</a> |
| Grouped buttons | <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div> |
| Inline buttons | <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div> |
| Form element (Select menu) | <div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div> |
| Basic List views | <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul> |
| Dialogs | <a href="foo.html" data-rel="dialog">Open
dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> |
| Transitions | <a href="index.html" data-transition="pop" data-back="true"> |
一、jQuery Mobile开发mobile web page Structure
单页面框架
<!DOCTYPE html> <html> <head> <title>jQuery Mobile web template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--responsive web design--> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page"> <!-- 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 --> </body> </html>
其中：
1.<meta name="viewport" content="width=device-width, initial-scale=1">
用于自适应页面，即responsive web design
2. data-role
是jQuery Mobile的特征tag ，这里 data-role="page" 表示本网页是页面属性
二、多页面框架——多个本地页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Multi-page template</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <!-- Start of first page: #one --> <div data-role="page" id="one"> <div data-role="header"> <h1>Multi-page</h1> </div><!-- /header --> <div data-role="content" > <h2>One</h2> <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p> <h3>Show internal pages:</h3> <p><a href="#two" data-role="button">Show page "two"</a></p> <!-- 使用锚点（Anchor）#two跳转到inner page 2 --> <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p> </div><!-- /content --> <div data-role="footer" data-theme="d"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page one --> <!-- Start of second page: #two --> <div data-role="page" id="two" data-theme="a"> <div data-role="header"> <h1>Two</h1> </div><!-- /header --> <div data-role="content" data-theme="a"> <h2>Two</h2> <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p> <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page two --> <!-- Start of third page: #popup --> <div data-role="page" id="popup"> <div data-role="header" data-theme="e"> <h1>Dialog</h1> </div><!-- /header --> <div data-role="content" data-theme="d"> <h2>Popup</h2> <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p> <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page popup --> </body> </html>
三、页面主题——theme
在data-theme 中定义，如<div data-role="content" data-theme="a">定义了inner page是用的主题a
默认主题如下图
其他主题如下图
四、页面过渡
jQuery Mobile 支持基于 CSS 的页面过渡（受到 jQtouch 的启发），页面过渡在导航到一个新页面和返回上一个页面时应用。这些过渡包括：
- 幻灯片——提供一个水平过渡
- 向上滑动和向下滑动——提供上下屏幕的过渡
- 弹出——提供一个爆炸式过渡类型
- 淡出——提供一个淡出过渡
- 翻页——提供一个翻页过渡
可以以两种方式添加页面过渡：
- 向链接添加一个数据过渡属性，使用
<a href="index.html" data-transition="pop" data-back="true">在静态页面上使用
data-transition。 - 通过编程方式，使用
$.mobile.changePage("pendingtasks.html", "slideup");处理动态页面时使用编程方法。