关于h5 jquery mobile经常使用代码的笔记，入门h5时作的笔记，我就是顺手用sublime text来作笔记致使笔记没啥标注和重点区分的人...之前考试复习也是顺手开sublime text来记重点...不过用sublime真的很顺手啊...jquery
1.判断浏览器是否支持Web Storage
if( window.localStorage ){
//浏览器支持localStorage
//localStorage:永久性存储于客户端，安全性方面，域内安全（在该域内的全部页面均可以访问localStorage数据），不一样浏览器数据独立，不可跨浏览器访问。
}
if( window.sessionStorage ){
//浏览器支持sessionStorage
}json
2.localStorage存储json数据
var jsonData = {
name:"user name",
account:"normal",
level:"1"
}
//存
localStorage.serItem("jsonData",JSON.stringify(jsonData));
//读
var newData = JSON.parse(localStorage.getItem("jsonData"));浏览器
3.在线状态检测
var isOnline = window.navigator.onLine();安全
4.得到当前位置
navigator.geolocation.getCurrentPosition(function(pos){
//获取成功
//...
},function(){
//获取失败
//...
},options)网络
5.检测浏览器是否支持dataset
var title = document.getElementById("title");
if(title.dataset){
//支持
}else{
//不支持
}session
6.在jquery mobile中，是使用自定义属性驱动页面的（data-….），好比：
data-role
定义元素在页面中的角色，该属性容许定义不一样的组件元素及页面视图：data-role=”page”
data-title
定义jquery mobile视图页面标题
data-transition
定义视图切换的动画效果
data-rel
定义具备浮动效果的视图（相似于用对话框的方式打开）
data-theme
指定元素或者组件内主题样式风格
data-icon
在元素内增长小图标
data-iconpos
定义小图标位置
data-inline
指定按钮根据内容自适应其长度
data-type
定义分组按钮水平或者垂直方向排布
data-rel
定义具备特定功能的元素，例如data-rel=”back”返回按钮
data-add-back-btn
指定视图页面自动在页眉左侧添加返回按钮
data-back-btn-text
指定由视图页面自动建立的返回按钮的文本内容，该属性的使用一般都须要和data-add-back-btn配合
data-position
该属性是实如今滑动屏幕时工具栏的显示和隐藏状态
data-fullscreen
用于指定全屏视图页面
data-native-menu
指定下拉选择功能采用平台内置的选择器
data-placeholder
设置下拉选择功能的占位符
data-inset
实现内嵌列表功能
data-split-theme
设置列表右侧图标的主题样式风格
data-filter
开启列表过滤功能框架
7.实现多视图页面
(1)用data-role="page"定义页面
(2)用a标签跳转指定id的data-role="page"的页面
(3)data-title同理ide
8.将data-transition值更改能够改变过渡效果，下面是对应效果的值
fade：淡入淡出效果
flip ：翻页效果
flow：流效果
pop ：弹窗效果
slide：滑动效果
slidefade：滑动淡出效果
slideup：上滑动效果
slidedown：下滑动效果
turn：翻页效果
none：无过分动画
reverse：反向工具
9.data-role=button可将超连接变成按钮，除此以外 submit reset button image 的input标签也可用此方法布局
10.data-icon 为减小网络下载的大小而提供的图标
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="arrow-u" 上箭头
data-icon="arrow-d" 下箭头
data-icon="plus" 加
data-icon="minus" 减
data-icon="delete" 删除
data-icon="check" 检查
data-icon="home" 首页
data-icon="info" 信息
data-icon="grid" 网格
data-icon="gear" 齿轮
data-icon="search" 搜索
data-icon="back" 后退
data-icon="forward" 向前
data-icon="refresh" 刷新
data-icon="star" 星
data-icon="alert" 提醒
默认在button按钮最左侧位置，可经过data-iconpos设置：left,right,top,bottom。notext表示没有文字只有图标的按钮
10.a标签用data-rel="back" 模拟后退按钮。或者是在div上加data-add-back-btn="true" data-back-btn-text="返回",这样会在该div的视图区域的data-role=header或footer部分增长后退按钮（文字由data-back-btn-text指定）
11.用户轻触/滑动屏幕时，工具栏的自动隐藏和显示：在data-role="header"||"footer"的标签加data-position="fixed".
12.全屏模式工具栏的隐藏：在data-role="header"||"footer"的标签加data-position="fixed"，在页面视图div上加data-fullscreen="true"
13.网格布局
一列（使用ui-grid-solo类）
两列（使用ui-grid-a类）
三列（使用ui-grid-b类）
四列（使用ui-grid-c类）
五列（使用ui-grid-d类）
对应每一个格用ui-block-a/b/c.. 其中ui-block-a还有清除浮动的做用（用于多列多行的状况）
14.折叠块：data-role="collapsible" 默认开启状态，点击则折叠起来(建议用在section标签上)
15.手风琴效果：页面视图div设置 data-role="collapsible-set"，里面包含若干 data-role="collapsible" 的section
16.jquery mobile的input类型：slider 范围选择。可结合select组成开关组件。
<div data-role="fieldcontain">
<label for="slider">toggle switches</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">关闭</option>
<option value="on">开启</option>
</select>
</div>
17.推荐把单选/多选按钮放在fieldset中，fieldset设置data-role="controlgroup"。
18.单选按钮可设置水平排列，此时会省略左侧圆圈图标：data-type="horizontal"。多选按钮与单选按钮类似。
19.下拉选择菜单实现弹出层显示效果：将select放在data-role="controlgroup"的标签里面。data-native-menu设置为false采用jquery-moblie自定义弹出层窗口，不然使用平台内置选择器。
20.下拉菜单分组
<optgroup label="分组名"></optgroup> <!-- 分组不可选择 -->
21.含有占位符的下拉菜单
（1）value="" 的option元素
（2）没有文本内容的option元素
(3)带有data-placeholder的option元素
22.多层嵌入列表 外层ul 加 data-role="listview" li标签嵌入内层ul做为嵌入的列表。
23.分割按钮列表 li中使用两个a标签，jquery mobile会将第二个连接变成只有图标的按钮。在ul上用data-split-icon设置图标 data-split-theme设置图标的主题风格样式。
24.列表分隔符 在li标签上使用data-role="list-divider",能够用data-groupingtheme指定分隔符的主题。
25.ul设置data-filter="true"实现对静态列表的搜索功能。注意只能搜索静态内容，若是要搜索后台传过来并显示的数据，要再本身编写实现逻辑。
26.含有气泡计数的列表 在li中加 <span class="ui-li-count">count值</span>
27.列表右侧文本内容 在li中加<p class="ui-li-aside">文本内容</p>
28.列表项左侧的icon图标 在li中加<img src="icon.png" alt="xxx" class="ui-li-icon">做为第一个元素。若只是须要在li中加图片（不是做为icon）则去掉ui-li-icon就好。
29.内嵌列表 对ul或ol元素定义data-inset="true"
30.jquery mobile 开始运行时，会在document对象触发mobileinit时间，所以能够经过重写此时间配置应用初始属性。
$(document).bind("mobileinit",function(){
//jquery mobile初始化代码
})
31.设置页面切换的默认效果 $.mobile.defaultPageTransition = "fade"
JqueryMobile提供了6种效果供用户选择，分别是slide（滑动），slideup（由下向上滑入），slidedown（由上向下滑入），pop（弹出），fade（渐变），flip（翻转）
32.加载中的提示文字 $.mobile.loadingMessage = "加载中"
33.加载失败的提示文字 $.mobile.pageLoadErrorMessage = "加载中"
34.jquery mobile 事件
$('#xxx').live('pagebeforecreate',function(event){
//pagebeforecreate:框架初始化以前触发
})
$('#xxx').live('pagecreate',function(event){
//pageCreate:当视图或页面被切换时触发
})
$("p").on("tap",function(){
//touch事件
//tap:单击事件
//taphold:长单击（时长1s)事件
//swipeleft:左滑动（>30px）事件
//swiperight:右滑动（>30px）事件
});
其余事件
方向改变事件（部分浏览器不支持，慎用）orientationchange
页面显示/隐藏事件
pagebeforeshow 视图经过动画效果开始显示在屏幕以前触发
pagebeforehide 视图经过动画效果开始隐藏在屏幕以前触发
pageshow 视图经过动画效果显示在屏幕以后触发
pageshow 视图经过动画效果隐藏在屏幕以后触发
34.元素上绑定数据
$.mobile.jqmData(element,key,value)//绑定
$.mobile.jqmRemoveData([data])//移除[name]的data属性
$.mobile.jqmHasData(element)//判断是否有绑定数据
35.判断绝对/相对路径
$.mobile.path.isRelativeUrl("url")//相对
$.mobile.path.isAbsoluteUrl("url")//绝对
36.绝对/相对路径转换
$.mobile.path.makePathAbsolute(relPath,absPath)//absPath做为参考路径,针对文件路径
$.mobile.path.makeUrlAbsolute(relUrl,absUrl)//absPath做为参考路径，针对url
37.判断域 $.mobile.path.osSameDomain(path1,path2);//当且仅当协议和域名相同返回true