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
单页面框架
jQuery Mobile web template Page Title
Page content goes here.
Page Footer
其中：
1.<meta name="viewport" content="width=device-width, initial-scale=1">
用于自适应页面，即responsive web design
2. data-role
是jQuery Mobile的特征tag ，这里 data-role="page" 表示本网页是页面属性
二、多页面框架——多个本地页面
Multi-page template Multi-page
One
I have an
idof "one" on my page container. I'm first in the source order so I'm shown when the page loads.You link to internal pages by referring to the
idof the page you want to show. For example, to link to the page with anidof "two", my link would have ahref="#two"in the code.Show internal pages:
Page Footer
Two
Two
I have an id of "two" on my page container. I'm the second page container in this multi-page template.
Notice that the theme is different for this page because we've added a few
data-themeswatch 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.Page Footer
Dialog
Popup
I have an id of "popup" on my page container and only look like a dialog because the link to me had a
data-rel="dialog"attribute which gives me this inset look and adata-transition="pop"attribute to change the transition to pop. Without this, I'd be styled as a normal page.Page Footer
三、页面主题——theme
在data-theme 中定义，如定义了inner page是用的主题a 默认主题如下图
其他主题如下图
四、页面过渡
jQuery Mobile 支持基于 CSS 的页面过渡（受到 jQtouch 的启发），页面过渡在导航到一个新页面和返回上一个页面时应用。这些过渡包括：
- 幻灯片—— 提供一个水平过渡 向上滑动和向下滑动—— 提供上下屏幕的过渡 弹出—— 提供一个爆炸式过渡类型 淡出—— 提供一个淡出过渡 翻页—— 提供一个翻页过渡
可以以两种方式添加页面过渡：
- 向链接添加一个数据过渡属性，使用
<a href="index.html" data-transition="pop" data-back="true">在静态页面上使用
data-transition。 - 通过编程方式，使用
$.mobile.changePage("pendingtasks.html", "slideup");处理动态页面时使用编程方法。