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

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获得试用帐号