jquery mobile

基础概念

元素数据之间的共享，使用jquery 的data方法。

通过data-role属性指定元素的role，常用的有：page、header、content、footer，button、listview

组件、控件相关的概念基本都有对应的role可以直接使用

一屏幕只能显示一个page，html内如果有多个page，则其他page会被隐藏，隐藏方式如下：

页面的跳转方式

内部跳转（内连接）：一个html内有多个page，page上都要指定id，这些page之间的跳转通过点击 a href=pageId 来跳转

外连接：href指定其他页面地址，这种方式是通过ajax来加载页面，然后这个页面中的第一个page内的元素插入到当前页面中，虽然载入的仅仅是第一个page的内容，但ajax下载的时候可是把html的全部内容都下载了。那就意味着这个page以外的元素会被无视，而且被装入的page内的环境和当前页面的环境是一致的。当页面被关闭（如返回），对应page的html会从当前页面中移除，想要取消以上的效果，只需要加上rel=external即可，或者使用data-ajax="false"也可以，但两者的侧重点不同，前者应针对不同域名下的页面，而后者是同域

跳转到其他page，除了通过a标签，还可以通过脚本：

$(function() {
    $.mobile.changePage("about.htm",
    { transition: "slideup" });
})

以上代码，在页面加载完后就跳转到about.htm页面，同时可以指定过渡动画

预加载

只针对外链接，内连接根本就没必要预加载和缓存。

在标签上使用<a href="about.htm" data-prefetch="true"></a>，则当前页面会自动进行ajax请求，加载页面，然后把里面第一个page装入到当前页面中。

执行预加载会影响当前页面的访问速度，或者手动进行loadPage也是可以达到预加载的目的：

$(function() {
    $.mobile.loadPage("about.htm");
})

缓存

data-prefetch、loadPage和data-dom-cache的区别

data-prefetch：只要page被显示出来，内部指定了data-prefetch的a标签就会执行预加载，然后把对应html内的page载入（后退回来也会重新执行data-prefetch）

loadPage：该函数执行一次，就下载和载入一次。 可以理解为只执行一次预加载

以上两者载入的page，在返回之后都会被销毁，而cache载入则不会销毁

data-dom-cache：在被载入的page元素上添加data-dom-cache="true"，点击执行第一次ajax请求后，该页面的page被载入到当前页面内，之后不会再移除这个page，相当于变相成为了内连接

cache和loadPage（或者data-prefetch效果一致）配合：自动加载，而且返回后不会被销毁。针对这一点可以推出prefetch的特性。如果当前页面存在这个page的话，则不进行下载，不过对于单独使用prefetch的情况下（不使用cache），当被载入的page返回后，这个page就被销毁了，导致当前page需要再次对这个page进行预加载

控件

对于role=button的a标签，也会拥有button的样式

后退功能： data-rel=back，会忽略a标签的href值，给个#即可


data-icon指定图标、data-position指定定位

有内定的样式class，如使按钮定位在右边 ：ui-btn-right

后退

在page上设置data-add-back-btn="true"，仅当该page是从其他page中打开跳转过来的，该page的头上才会显示后退按钮。

点击这个也可以实现后退效果

<a data-rel="back">后退</a>

如果被打开的page是以对话框形式打开，则back也可以关闭对话框

指定后退按钮的文字：

<div id="e3" data-role="page" data-add-back-btn="true" data-back-btn-text="哈哈">

网格布局

提供了一套列布局方案。原理是外部的grid通过overflow成为BFC容器，而内部的列block，都是向左边浮动

ui-block-a 有一个 clear：left样式。所以a列必定是行的第一列，假如一个grid中出现两个a，则第二个a因为有清除浮动，所以就移动到了下一行去了。就实现了a创建行的效果

主题

data-theme，有a~e5种，给page指定的话，则应用到整个page，给button指定的话，则仅仅引用到button上

在框架初始化，框架获取theme值，然后拼接对应的class，添加到元素上。所以如果要动态切换主题的话，可不是单单data-theme值这么简答了

事件

http://w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp

$(document).on("pageinit","#pageone",function(){

});

pageone是一个page的id

mobileinit

　　一般都是绑定在document上，需要在jqm导入前进行绑定，否则该绑定无效【导入、执行jqm过程中就会触发这个事件，所以在jqm导入后才绑定的话，这个事件早就触发过了，所以无效】，这个方法调用的时候，还没进行jqm控件增强，所以可以在这个函数中对jqm进行参数配置等（如配置命名空间、配置主题等）

pagebeforecreate

　　绑定在page元素上，当page创建完成，但里面的组件还没有初始化时，会执行这个回调方法

pagebeforehide

　　绑定在page元素上，当page被隐藏或者销毁时，在动画开始前会调用这个方法

pagebeforeload

　　绑定在document上，当有page被加载进当前文档时（点击a标签、预加载等），会触发这个方法

pagebeforeshow

　　绑定在page上，当page要被显示出来时（第一个page显示的时候也会触发这个事件），在动画开始前就会执行这个方法

pagechange

　　绑定在document上，触发时机和pagebeforshow一致，只不过是在动画之后，也就是page完成切换后才执行

pagechangefailed

　　绑定在document上，当page切换失败后会执行，比如点击了a标签，href指向不存在的路径时会执行

pagecreate

　　绑定在page上，仅当page被载入到dom后才执行。执行次序在pagebeforeshow之前

pagehide

　　对应pagebeforehide，区别是在动画完成后才执行