标签：
下载安装，工作原理，自动增强，视口，事件，响应手持方向，移动浏览仿真器
jQueryMobile
1. 下载安装
http://jquerymobile.com
<header>
<title>导入</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">
</header>
2. 工作原理
jquerymobile提供三种浏览器级别支持
A 级别最高 可提供最佳体验
B 次之 除了不支持Ajax导航，其他都支持，页面切换不如A平滑
C 基础 支持较老的设备
2.1 自动增强
jQueryMobile 组件不必明确创建。
当使用script导入jQueryMobile库后，它会自动增强这个页面。
首先会寻找带有data-role属性的元素，然后根据属性值决定对元素做什么处理。
data-role page 该元素内容视为一个页，一个HTML文件可包含多个“页”
header 当前页标题
content 当前页内容
2.2 视口
<meta name="viewport" content="width=device-width,initial-scale=1">
或使用CSS媒体查询识别屏幕大小，各写一套样式
2.3 事件
1.页事件
<header>
<title>导入</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript"> //自定义脚本放于库导入之前
$(document).bind("pageinit",function(){ //将名为pageinit的事件绑定在document上
$("button").click(function(){
console.log("button press")
});
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">
</header>
2.触摸事件
为了支持各种用户脚本，移动浏览器会自动一些触摸事件额外生成相应的鼠标事件。
浏览器先触发触摸事件，再伪造一个表示同样行为的鼠标事件。
touchstart 每个手指触摸屏幕都会触发
touchend 手指离开屏幕时触发
touchmove 手指不离开屏幕移动时触发
touchcancel -----手指移动到屏幕边缘时触发
（www.w3.org/TR/touch-events）
3.手势方法
tap 短时间内单击屏幕并迅速离开时触发
taphold 压住屏幕保持约1s后离开屏幕时触发
swipe 1s内水平拖拽至少30px,垂直方向变动不超过20px时触发
swipeleft 向左
swiperight 向右
4.虚拟鼠标事件
由于浏览器没有义务伪造鼠标事件，Web应用想要同时支持触摸设备和非触摸设备，
就必须同时监听鼠标事件和触摸事件。移动浏览器确实会伪造事件，这样每个交互都能
捕获到触摸事件和鼠标事件。为了简化这一处理，jQueryMobile定义了虚拟鼠标事件，
当绑定这些事件时，jQueryMobile会小心地删除那些重复发生的事件，并保证那些需要
触发的事件一定会发生，不管该设备是否支持触摸。
vmouseover
vmousedown
vmousemove
vmouseup
vmousecancek
vclick
2.4 响应手持方向
绝大多数浏览器支持 orientationchange 事件，这个事件在设备手持方向旋转90度
时发生，jQueryMobile会在不支持此事件的浏览器上伪造这一事件。这是通过监视窗口的
大小变化及新高度的比例来实现的。
<header>
<title>导入</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript"> //自定义脚本放于库导入之前
$(document).bind("pageinit",function(){ //将名为pageinit的事件绑定在document上
$(window).bind("orientationchange",function(e){ //为了绑定orientationchange事件选择window对象
$("#spanA").text(e.orientation) //改变span元素文本的方式指示新的方向，利用传递给事件处理函数Event对象的
}); //orientation属性，我们能够获知设备现在是横屏还是 竖屏
$("#spanA").text(jQuery.event.special.orientationchange.orientation()) //该方法判断当前屏幕方向
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>
<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">
</header>
若浏览器不支持方向变化，则通过窗口的高宽比来判断设备方向。
利用媒体查询管理设备朝向，利用display 属性控制元素显示或隐藏
@media screen and (orientation:portrait){ 竖
}
@media screen and (orientation:landscape){ 横
}
3. 处理移动设备
如果打算让应用同时支持桌面用户和移动用户，则：
为桌面浏览器提供 jQuery UI，
为移动设备提供jQuery Mobile。
3.1 避免两大陷阱
1 避免错误假设
移动设备 不等于iPhone
移动设备 不等于手机
移动设备 不等于触摸设备
移动设备 的流量不仅有限而且收费
2 避免不切实际的仿真和测试
3.4 移动浏览器仿真器
没有触感
不会遮挡
过于精准
3.5 移动浏览器仿真器
A Opera Mobile 模拟器 www.opera.com/developer/mobile-emulator
B BrowserStack商业服务 http://browserstack.com获得试用帐号
标签：
原文地址：http://www.cnblogs.com/zhangchen2015/p/4576108.html
