jQuery Mobile（Pages）
jQuery Mobile 包含后退按钮的历史支持，AJAX的动态外部网页的页面加载；一系列动画页面转换和简单的工具好似一个对话框一样来展示页面。（？不确定翻译是否正确）
1.解剖页面
jQuery Mobile “页面”的结构进行了优化，支持页面内无论是单页或本地内部联系“页面”
这个模型的目标是让开发人员能够创建网站使用的最佳实践 - 普通链接“只是工作”，没有任何特殊的配置 - 然而仅使用标准的html不能够创造丰富，地道的体验。
1.1 Mobile page structure
一个 jQuery Mobile 网站必须以html5开始，才能充分利用框架的所有功能。jquery model 1.1 需要与1.6.4 and 1.7.1 versions of jQuery core 一起工作如下：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
Viewport meta tag：用来设定设备上屏幕页面缩放级别和尺寸；如果不设置，许多移动浏览器将使用一个“虚拟”的页面宽度约900像素，使其工作以及与现有的桌面网站，但看起来可能放大，太宽屏幕
1.2 Inside the body: Pages
在body标签内，每一个在移动设备上的view或者page上的元素，通常是一个div，都被标识为data-role="page" 属性；data-role属性详细内容：http://jquerymobile.com/demos/1.1.0/#/demos/1.1.0/docs/api/data-attributes.html。
Button
Links with data-role="button". Input-based buttons and button elements are auto-enhanced, no data-role required
| data-corners | true | false |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-iconpos | left | right | top | bottom | notext |
| data-iconshadow | true | false |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-shadow | true | false |
| data-theme | swatch letter (a-z) |
Multiple buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the buttons to sit side-by-side.
Checkbox
Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
Collapsible
A heading and content wrapped in a container with the data-role="collapsible"
| data-collapsed | true | false |
|---|---|
| data-content-theme | swatch letter (a-z) |
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) |
Collapsible set
A number of collapsibles wrapped in a container with the data-role="collapsible-set"
| data-content-theme | swatch letter (a-z) - Sets all collapsibles in set |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) - Sets all collapsibles in set |
Content
Container with data-role="content"
| data-theme | swatch letter (a-z) |
|---|
Dialog
Page with data-role="page" linked to with data-rel="dialog" on the anchor.
| data-close-btn-text | string (text for the close button, dialog only) |
|---|---|
| data-dom-cache | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Enhancement
Container with data-enhance="false" or data-ajax="false"
| data-enhance | true | false |
|---|---|
| data-ajax | true | false |
Any DOM elements inside a data-enhance="false" container, save for data-role="page|dialog" elements, will be ignored during initial enhancement and subsequent create events provided that the $.mobile.ignoreContentEnabled flag is set prior to the enhancement (eg in a mobileinit binding).
Any link or form elements inside data-enhance="false" containers will be ignored by the framework's navigation functionality when $.mobile.ignoreContentEnabled is set to true.
Field container
Container with data-role="fieldcontain" wrapped around label/form element pair
Flip toggle switch
Select with data-role="slider", two options only
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Footer
Container with data-role="footer"
| data-id | string (unique id, useful in persistent footers) |
|---|---|
| data-position | fixed |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Header
Container with data-role="header"
| data-position | fixed |
|---|---|
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Link
Links, including those with a data-role="button", and form submit buttons share these attributes
| data-ajax | true | false |
|---|---|
| data-direction | reverse (reverse page transition animation) |
| data-dom-cache | true | false |
| data-prefetch | true | false |
| data-rel | back (to move one step back in history) dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain) |
| data-transition | slide | slideup | slidedown | pop | fade | flip |
Listview
OL or UL with data-role="listview"
| data-count-theme | swatch letter (a-z) |
|---|---|
| data-divider-theme | swatch letter (a-z) |
| data-filter | true | false |
| data-filter-placeholder | string |
| data-filter-theme | swatch letter (a-z) |
| data-inset | true | false |
| data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-split-theme | swatch letter (a-z) data-themeswatch letter (a-z) |
Listview item
LI within a listview
| data-filtertext | string (filter by this value instead of inner text) |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-role | list-divider |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
Navbar
A number of LIs wrapped in a container with data-role="navbar"
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
Page
Container with data-role="page"
| data-add-back-btn | true | false (auto add back button, header only) |
|---|---|
| data-back-btn-text | string |
| data-back-btn-theme | swatch letter (a-z) |
| data-close-btn-text | string (text for the close button, dialog only) |
| data-dom-cache | true | false |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Radio button
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
Select
All select form elements are auto-enhanced, no data-role required
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-native-menu | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme for non-native selects |
| data-placeholder | true | false - Add to the Option |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.
Slider
Inputs with type="range" are auto-enhanced, no data-role required
| data-highlight | true | false - Adds an active state fill on track to handle |
|---|---|
| data-mini | true | false - Compact sized version |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Text input & Textarea
Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
标准的jquery model 页面结构：
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
总结：整理之前的代码为
<!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.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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>
运行效果：
1.3 Multi-page template structure 多页面结构模板
一根单独的html页面可以包含多个页面，他们被是出自同一个页面的不同的 div，每个div 的data-role = "page“，并且拥有唯一的id，已被用于连接如herf=”#foo“
<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 the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</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>
浙公网安备 33010602011771号