基础概念
元素数据之间的共享，使用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，区别是在动画完成后才执行