1、模板结构
1.1 jQuery Mobile单页模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> //user-scalable=no 禁用缩放
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!--<script src="custom-srcipt-js"></script>--> //自定义脚本位置
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>你好</p> //注意：html文件的编码格式要为utf-8，否则有中文会乱码
</div>
<div data-role="footer" data-position="fixed"> //默认页脚在内容之后，添加此句后定位到屏幕底部
<h4>Page Footer</h4>
</div>
<script type="text/javascript">
/*Page specific scripts here*/
</script>
</div>
</body>
</html>
1.2 多页模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page" id="home" data-title="Welcome">
<div data-role="header">
<h1>Multi-Page</h1>
</div>
<div data-role="content">
<a href="#contact-info" data-role="button">Contact Us</a>
</div>
<script type="text/javascript"> //多页面文档内部javascript
/* Page specific scripts here. */
</script>
</div>
<!-- Second Page -->
<div data-role="page" id="contact-info" data-title="Contacts">
<div data-role="header">
<h1>Contact Us</h1>
</div>
<div data-role="content">
Contact information...
</div>
</div>
（1）每个页面必须包含唯一id
（2）最初显示多个页面时，只有第一个页面得到增强并显示
（3）链接到一个内部页面时，必须通过页面id来引用，href="#contact",载入页面的地址multi-page.html#contact
（4）多页面文档内部的javascript不能被其他页面访问
（5）父文档head标签内声明的所有脚本，都可以被内部页面和通过Ajax载入的页面访问
2、页面切换和过度
2.1 切换分类
（1）一个多页文档中，一个内部页到另一内部页（Ajax导航）
根据#id <a href="#next">
（2）同一个域范围内，一个单页文档切换到另一单页文档（Ajax导航）
<a href="otherDocument.html">Go to next page</a>
（3）当连接到一个多页面文档时，必须为其链接添加rel="external"（HTTP）
<a href="multi-page.html" rel="external">Home</a>
（4）外部绝对地址,连接到另一个域(HTTP)
<a href="www.mobileweb.com" data-rel="external"></a>
<a href="www.mobileweb.com" target="_blank"></a>
（5）打开dailog
<a href="confirmtion.html" data-rel="dialog">Open Dialog</a>
<a href="confirmtion.html" data-role="dialog">Open Dialog</a>
confirmtion.html
<div data-role="page" id="confirm">
注意：如果要打开一个对话框页面，链接写data-role="dialog，但是具体的confirmtion.html一定要写data-role="page"而不是data-role="dailog"，否则弹出的对话框页面中类似绑定事件都将无效！！！
</div>
（6）返回到上一页面
<a href="back.html" data-direction="reverse">Back</a>
（7）移动应用特殊链接，URI
电话
<a href="tel:+1800229933">Call us free!</a>
Video and VoIP Calls
<a href="facetime:101010">Call me using Facetime</a>
<a href="skype:skype_user?call">Call us using Skype</a>
<a href="mailto:[email protected]">Mail us</a>
<a href="mailto:[email protected]?subject=Contact%20from%20mobile">Mail us</a>
<a href="mailto:[email protected]?subject=Contact&body=This%20is%20the%20body">Mail us</a>
2.2 页面间过度
<a href="otherDocument.html" data-transition="slide">Go to next page</a>
| slide slideup slidedown pop fade flip
|
The default right-to-left animation. Bottom-to-top animation, mostly used for modal pages. Top-to-bottom animation. The new page will grow from a small point in the middle to a full-screen page. A cross-fade animation between old and new pages. A 2D or 3D rotation animation. 3D is available only on some devices, such as iOS devices. On other devices, such as those that are Android-based, this transition renders a 2D rotation that may not be the effect you really want.
|
3、toolbar 工具条——使用页眉或页脚
3.1位置模式
（1）默认模式（Default：Inline mode）
当页面content内容超过一屏时，滚动页面时，页眉和页脚将隐藏。
<div data-role="header">
<h1>Default</h1>
</div>
（2）固定模式（Fixed）
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
页眉和页脚位于顶部和底部，位置不变，否则当内容较少是，页脚紧随内容之后显示
（3）全屏模式（FullScreen）适用于浏览图片，电子书应用
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
页眉和页脚基于响应来出现和消失
3.2 添加按钮（通用于页眉和页脚）
（1）只带有文本按钮
<a href="#">Done</a>
（2）只带有图标的按钮
<a href="#" data-icon="plus" data-iconpos="notext"></a>
（3）既有文本又有图标的按钮
<a href="#" data-icon="plus" >Done</a>
3.3页眉
（1）修改按钮位置，默认左侧对齐(class="ui-btn-left")，可修改到右侧对齐
<a href="#" data-icon="plus" class="ui-btn-right">Done</a>
（2）添加回退按钮
a)在页面容器添加data-auto-back-btn="true",为某个特定页面添加回退按钮
<div data-role="page" data-auto-back-btn="true" data-back-btn-text="Pervious" data-back-btn-theme="e">
b)在绑定mobileinit选项时，全局启动回退按钮
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.option.addBackBtn=true;
$.mobile.page.prototype.option.backBtnText="Previous"; //回退按钮显示的文字
$.mobile.page.prototype.option.backBtnTheme="b";
});
如果在全局启用了回退按钮，可通过在页面页眉中添加data-auto-back-btn="false"禁用特定页面回退按钮
c)回退链接
<a href="home.html" data-rel="back" data-role="button"> Go Back</a>
3.4 页脚
（1）添加永久导航条
ui-btn-active标明载入页面时选中的项，如果不写默认是ui-btn-inactive，ui-state-persist表示选中项保持选中状态
<div data-role="footer" data-id="main" data-position="fixed" data-theme="b"> //创建永久导航条，避免页面转换期间闪烁，需要唯一data-id="main"
<div data-role="navbar"> //标记为导航条
<ul>
<li><a href="#" data-icon="star" class="ui-btn-active ui-state-persist">天气</a></li>
<li><a href="#" data-icon="info" >趋势</a></li>
<li><a href="setup.html" data-icon="gear" >城市</a></li>
<li><a href="#exit" data-icon="delete" data-rel="dialog" data-transition="pop">退出</a></li>
</ul>
</div>
</div>
（2）带自定义图标导航条
<!-- tab bar with custom icons -->
<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
<div data-role="navbar" class="ui-navbar-custom">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>
<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>
</ul>
</div>
</div>
<style>
.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }
.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#home .ui-icon { background: url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }
#movies .ui-icon { background: url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }
#theatres .ui-icon { background: url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }
</style>
4、Main roles available in jQuery Mobile 1.0
data-role =""
| Role |
Description |
| page
header
content
footer
navbar
button
controlgroup
collapsible
collapsible-set
fieldcontain
listview
dialog
slider
nojs |
Defines a page, the unit that jQuery Mobile uses to show content
Header of a page
Content of a page
Footer of a page
Defines a navigation bar, typically inside a header
Renders a visual button
Renders a component
Collapsible panel of content inside a page
Group of collapsible panels (accordion)
Container for form fields
Content of multiple items as a list
Dialog page
Visual slider for Boolean values
Element that will be hidden on jQuery Mobile’s compatible browsers |
5、主题（data-theme）
