JQUERY MOBILE 1.0 BETA 3 中文基础——事件

事件

JQM开创性的提供了丰富的事件处理机制,并且耗费了很大的精力将不同设备的事件进行了整合,使开发者不必再为了解决不同设备之间的事件处理差异而耗费时间和精力。

这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件,所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。

注意:使用pageCreate()代替$(document).ready()

在学习jQuery时我们学到了用$(document).ready()来使你的脚本在DOM元素加载完成后才开始执行,但是在JQM中每一页的内容都是通过Ajax来加载的,这样在进行页面转换的时候是无法再次触发$(document).ready()方法的,因此我们需要绑定pageCreate事件来处理页面转换时需要执行的脚本。

Touch(触控)事件

tap

点击,快速的触摸并且离开,等效一次完整的点击操作。

taphold

按住,触摸并且保持一段时间(接近一秒的时间)。

swipe

滑动,在一秒钟内水平移动30px以上(垂直偏移不超过20px)时触发。

可配置项(灵敏度设置):

属性

备注

scrollSupressionThreshold

默认值:10px;超出这个水平位移将会抑制滚动操作,将不响应在允许的垂直偏移范围内的操作(设置判断是左右滑动还是上下滚动识别器的灵敏度)

durationThreshold

默认值:1000ms;超过这个时间将不认为是滑动

horizontalDistanceThreshold

默认值:30px;认为是滑动操作的最小水平位移

verticalDistanceThreshold

默认值:75px;滑动操作允许的垂直误差上限

swipeleft

向左侧滑动

swiperight

向右侧滑动

方向改变事件

orientationchange

在设备的方向发生变化时触发,由于不是所有的浏览器都支持原生的orientationchange,所以JQM的这个事件是通过resize事件衍生出的一个事件。除了回调函数还有第二个参数用于识别当前方向:"portrait、"landscape"。

滚动事件

scrollstart

开始滚动时触发。iOS设备中此事件不稳定。

scrollstop

滚动结束后触发。

显示/隐藏事件

JQM页面在显示或者隐藏时就会触发这几个事件。事件包含了“显示之前”、“隐藏之前”、“显示之后”、“隐藏之后”,因此每一个页面的转换都会触发这4个事件。

pagebeforeshow

在页面显示之前触发

pagebeforehide

在页面隐藏之前触发

pageshow

在页面显示后触发。

pagehide

在页面隐藏后触发。

例如:

   1: $('div').live('pageshow',function(event, ui){
   2:   alert('This page was just hidden: '+ ui.prevPage);
   3: });
   4:  
   5: $('div').live('pagehide',function(event, ui){
   6:   alert('This page was just shown: '+ ui.nextPage);
   7: });

页面初始化事件

pagebeforecreate

在页面初始化之前,在插件开始初始化时触发。

例如:

   1: $('#aboutPage').live('pagebeforecreate',function(event){
   2:   alert('This page was just inserted into the dom!');
   3: });

pagecreate

在页面初始化之后触发。如果需要在页面载入后执行脚本,建议使用该事件,而不是使用$(document).ready(),因为在JQM中通过Ajax加载的页面只有使用pagecreate来触发才是可靠的。

例如:

   1: $('#aboutPage').live('pagecreate',function(event){
   2:   alert('This page was just enhanced by jQuery Mobile!');
   3: });

虚拟鼠标事件

JQM提供了”虚拟”点击事件来平衡不同设备中的Mouse和Touch事件,这些事件将会完美的整合鼠标和触控事件,在同时拥有这两种事件的设备上也能够自动的去匹配事件,并且不会引发两种事件的冲突。

vmouseover

统一处理触摸和鼠标悬停事件

vmousedown

统一处理触摸和鼠标按下事件

vmousemove

统一处理触摸和鼠标移动事件

vmouseup

统一处理触摸和鼠标按键松开事件

vclick

统一处理触摸和鼠标点击事件

vmousecancel

统一处理触摸和鼠标离开事件



[本日志由 eddy 于 2011-09-29 09:46 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 7401
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭