事件 event
重要说明: 使用 pageInit(),而不是$(document).ready()
你学jquery的第一件事就是在 $(document).ready()函数中写代码,所以一切都在dom元素加载后执行。但是在jQuery Mobile中,AJAX会根据你的导航把每个页面的内容加载到dom中,而DOM ready
函数只是在第一个页面加载完毕才会执行。所以要在任何新页面加载并创建是执行脚本,就需要绑定pageinit事件。这个方法会在本页底部详细解释。
重要说明: pageCreate() vs pageInit()
Prior to Beta 2 the recommendation to users wishing to
manipulate jQuery Mobile enhanced page and child widget
markup was to bind to the pagecreate event. In Beta 2 an
internal change was made to decouple each of the widgets
by binding to the pagecreate event in place of direct
calls to the widget methods. As a result, users binding to
the pagecreate in mobileinit would find their binding
executing before the markup had been enhanced by each of
the plugins. In keeping with the lifecycle of the jQuery
UI Widget Factory, the initialization method is invoked
after the create method, so the pageinit event provides
the correct timing for post enhancement manipulation of
the DOM and/or Javascript objects. In short, if you were
previously using pagecreate to manipulate the enhanced
markup before the page was shown its very likely you'll
want to migrate to 'pageinit'.
触摸事件 Touch events
tap(轻击)
一次快速完整的轻击后触发
taphold(轻击不放)
轻击并不放(大约一秒)后触发
swipe(划动)
一秒内水平拖拽大于30PX,同时纵向拖曳小于20px的事件发生时触发,但是这些是可以设置的
scrollSupressionThreshold (默认: 10px) – 大于这个值的水平位移, 我们就会抑制滚动
durationThreshold (默认: 1000ms) – 滑动时间超过这个数值就不会产生滑动事件
horizontalDistanceThreshold (默认: 30px) – 水平划动距离超过这个数值才会产生滑动事件
verticalDistanceThreshold (默认: 75px) – 竖直划动距离小于这个数值才会产生滑动事件
swipeleft(左划)
划动事件为向左的方向时触发
swiperight(右划)
划动事件为向右的方向时触发
swipe(划动):一秒内水平拖拽大于30PX,同时纵向拖曳小?0px的事件发生时触发
swipeleft(左划):划动事件为向左的方向时触发
swiperight(右划):划动事件为向右的方向时触发
虚拟鼠标事件 Virtual mouse events
vmouseover
处理touch 或者 mouseover的正规化的事件
vmousedown
处理touchstart 或者 mousedown 的正规化的事件
vmousemove
处理touchmove 或者 mousemove 的正规化的事件
vmouseup
处理touchend 或者 mouseup 的正规化的事件
vclick
处理touchend 或者 鼠标点击 的正规化的事件。在基于触摸的设备上,这个事件是在vmouseup事件之后触发的。
vmousecancel
处理touch 或者 mouse 的mousecancel的正规化的事件
警告:小心使用vclick
小心在触摸设备使用vclick。Webkit内核的浏览器会在touchend事
件触发后300ms自己生成mousedown, mouseup,和click 3个事件。
这些生成的鼠标事件的目标会在他们触发的时候被计算出来,并且
是基于touch事件的位置,并且有些情况下会在不同的设备上甚至
相同设备的不同OS会导致不同的计算结果。这就意味着原始的点击
事件的目标语浏览器自己生成的鼠标事件的目标元素可能不是同一
个。
我们建议在触摸后可能会改变你点击的点下面内容的事件中,使用
click而不是vclick方法。
这样的事件包括页面转场和其他的一些行为比如 收缩/伸展 这样
的 可能会导致屏幕有变化或者内容完全被替换的事件。
取消一个元素默认点击的行为
应用会调用一个 vclick 事件来取消某个元素的默认点击事件。在
基于鼠标的设备上,对vclick事件调用preventDefault()方法等同
于对真实点击的时间冒泡阶段调用 preventDefault() 方法。在基
于触摸的设备上就有点复杂了,因为真实的点击事件会在vclick
事件触发300毫秒之后触发。对于触摸设备,对vclick事件调用
preventDefault()方法会一些vmouse插件的一些代码来试图捕获下
一个点击事件。所以根据上述的警告,要匹配一个触摸事件和与他
对应的鼠标事件就比较困难,因为他们的目标是不同的。所以
vmouse插件试图通过坐标来识别一个相符的点击事件通常会失败。
有些情况下两个事件的目标和坐标的识别都会失败,这样就会导致
点击事件被触发或者元素的默认动作会被执行,或者内容被改变或
者替换的情况下,触发了别的元素的点击事件。
如果这样的bug在给定的元素上有规律的发生,我们建议对于动作使
用click来驱动触发。
设备方向变化事件 Orientation change event
orientationchange
滚屏事件 Scroll events
scrollstart
scrollstop
页面加载事件 Page load events
pagebeforeload
url (字符串)
通过回调传到$.mobile.loadPage()的绝对或者相对地址absUrl (字符串)
url的绝对地址版本。dataUrl (字符串)
绝对地址的 当识别页面或者更新浏览器地址的时候使用的绝对地址经过过滤的版本deferred (对象)
针对此事件调用preventDefault()的回调函数必须针对此事件调用
resolve()或者reject()方法,
使得changePage()的请求恢复。例如:
$( document ).bind( "pagebeforeload", function( event,
data ){
//让jqm框架知道由我们来处理load事件.
event.preventDefault();
//...加载文档然后插入到DOM中
//在这个回调中,或者通过其他的异步加载手段中,
//调用resolve,转入到下面的参数中,加上一个
//包含有页面dom元素的jquery选择器。
data.deferred.resolve( data.absUrl, data.options,
page );
});
pageload
url (字符串)
址absUrl (字符串)
url的绝对地址版本。页面显示/隐藏事件 Page show/hide events
pagebeforeshow:转场之前,页面被显示时触发
pagebeforehide:转场之前,页面被隐藏时触发
pageshow:转场之后,页面被显示时触发
pagehide:转场之后,页面被隐藏时触发
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
页面初始化事件 Page initialization events
pagebeforecreate:页面初始化时,初始化之前触
pagecreate:页面初始化时,初始化之后触
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by Jquery Mobile!');
});