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，区别是在动画完成后才执行