jQueryMobile 下载安装，工做原理，处理移动设备

下载安装，工做原理，自动加强，视口，事件，响应手持方向，移动浏览仿真器

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得到试用账号