jQuery Mobile权威指南笔记

第一章  初识jQuery Mobile

 一、与jQTouch、Sencha Touch、SproutCore的比较

　　1、jQTouch也是一个jquery的插件，官方下载地址：http://www.jqtouch.com

　　2、Sencha Touch：是一套基于ExtJS开发插件库，它与jQTouch相同，只针对WebKit内核的浏览器开发移动应用于，官网下载：http://www.sencha.com/

　　3、SproutCore：官网下载：http://www.sproutcore.com

 

二、页面结构

　　data-role自定义属性

1、单页面结构

<div data-role="page"> 
　<div data-role="header">...</div> 
　 <div data-role="content">...</div> 
　 <div data-role="footer">...</div> 
</div>

 

2、多页面结构

内页链接通过href=id名，来指用解决内链

<section id="page1" data-role="page">
　　<header data-role="header"><h1>jquery Mobile</h1></header>
　　<div data-role="content" class="content">
　　　　<p>这是首页</p>
　　　　<p><a href="#page2">详细页</a></p>
　　</div>
　　<footer data-role="footer"><h1></footer>
</section>

<section id="page2" data-role="page">
　　<header data-role="header"><h1>jquery Mobile</h1></header>
　　<div data-role="content" class="content">
　　　　<p>这是详细页</p>
　　　　<p><a href="#page1">返回首页</a></p>
　　</div>
　　<footer data-role="footer"><h1></footer>
</section>

 

外页链接

所谓外链指的是通过单击页面的某个链接，跳到另一个页面中，而不是在同一个页面切换，与内链不同就是在a元素中加了rel="external"属性，datatransition="pop"，切换时的效果

<a href="a1.html" rel="external" datatransition="pop"></a>

 

第二章  页面与对话框

 一、预加载与页面缓存

　　为了加快页面移动终端访问的速度，在jquery Mobile中使用预加载与页面缓存都是十分有效的方法，

　　当一个链接的页面设置好预加载后，jquery Mobile将在加载完成当前页面后自动在后台进行预加载设置障碍的目标页面.

　　页面缓存，可以将访问过的page容器都缓存到当前的页面文档中，下次在访问时，可以直接从缓存中读取，无需加载.

 

　　预加载：

　　1、data-prefetch="true";　　允许同时加载多个页面，进行预加载的过程中需要加大页面的HTTP访问请求，影响访问速度

　　例：<a href="dd.html" data-prefetch="true">预加载</a>　　　　// 将dd.html的页面先预加载进来

　　2、使用$.mobile.loadPage()来预加载指定的目标HTML页面，与data-prefetch属性一样

　　

　　页面缓存：

　　1、data-dom-cache="true";　　// 

　　例：<div data-role="page" data-dom-cache="true"></div>　　// 将页面容器为缓存

　　2、使用全局函数来将当前文档写入缓存：$.mobile.page.prototype.options.domCache = true;

 

二、页面的脚本

　　页面在初始化时会触发pagecreate事件，如果需要通过javascript代码改变当前页面的工作，可以调用jquery mboile中提供的changePage()方法，还可以调用loadPage()来加载指定的外部页面

　　1、创建页面

　　在JM中，页面是被请求后注入当前的DOM结构中，所以jquery中的$(document).ready()不会在JM中重复执行，可

　　<div data-role="page" id="el"></div>

　　<script>

　　　　$("#el").bind("pagebeforcreate", function(){ alert("正在创建页面") });

　　　　$("#el").bind("pagecreate", function(){ alert("页面创建完成") });

　　</script>

 

三、页面跳转

　　使用changePage()：跳转时的动画效果和需要带的一些数据

　　$.mobile.changePage("index.html", { transition: "slidedown"});

　　带数据：$.mobile.changePage("index.html", {type:"post", data:$("#login").serialize()}, "pop", false, false);

 

四、对话框

　　data-rel="dialog" 单击链接时打开对话框
　　<a href="d.html" data-rel="dislog">打开</a>

 

 

第三章  工具栏与格式化内容

一、头部栏

　　<div data-role="header"><h1>标题栏</h1></div>

 

　　后退按钮：

　　data-add-back-btn="true"　　// 设置为后退按钮

　　data-add-back-text = "后退"　　// 设置后退按钮的文字

 

 　　添加按钮：