jQuery Mobile的API事件

移动开发
jQuery Mobile提供了一些依赖于本地事件的自定义事件以用来创建一些有用的hooks方便开发. 要注意这些事件使用了各种已存在的触摸, 鼠标和窗口事件,你可以通过使用live() 或者 bind()将他们绑定到其他的jQuery事件上.

触摸事件

tap

在快速完整的一次触摸后触发该事件.

taphold

在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second).

swipe

在一秒钟的间隔内水平方向上拖动30px以上会触发该事件,(水平方向上拖动要保持在20px以内,否则不会触发).

swipeleft

在左边方向移动时触发该事件.

swiperight

在右边方向移动时触发该事件..

方向改变事件

orientationchange

当设备的方向改变时触发 (把设备转到垂直或者水平方向). 你绑定到此事件的回调函数可以有一个第二参数, 该参数包含一个orientation属性,该属性可以设置为"portrait" 或 "landscape".这些值也被添加为HTML元素的classes,你也可以在你的css选择器里指定它们. 要注意,当orientationChange不被支持时我们现目前将绑定resize事件作为替代.

滚动事件

scrollstart

当滚动开始时触发.要注意的是,IOS设备在滚动时会禁止DOM操作,并将DOM操作排队,当滚动结束时才执行这些操作.我们现在正在研究是否能够让DOM操作在滚动之前执行

scrollstop

滚动结束时触发.

页面 显示/隐藏 事件

在jQuery Mobile里,无论一个page在什么时候处于显示或者隐藏状态,这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏,所以,当一个page过渡发生,会有4个事件被触发:每个page触发两个.

pagebeforeshow

当page正在被显示但在它的过渡效果开始前触发.

pagebeforehide

当page正在被隐藏但在它的过渡效果开始前触发.

pageshow

当page正在被显示但在它的过渡效果结束后触发.

pagehide

当page正在被隐藏但在它的过渡效果结束后触发.

要注意这四个事件都引用了"下一页" (nextPage) 或者"上一页" (prevPage), 依赖于page是否正在显示或者隐藏且"下一页"或"上一页"存在(***个page显示时并没有"上一页",但是同样会引用一个空的jQuery对象). 你可以通过在第二个参数绑定一个回调函数来访问这个引用.比如:

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

当然,这些处理程序会在初始化page加载时被调用(invoked),你必须在jquery 执行之前就bind它们. 这些事情可以在mobileinit处理程序中完成,详情参见global config

页面初始化事件

在jQuery Mobile内部,自动初始化插件基于被设置有"page"标签的标记.例如:一个type为 range 的input元素 会自动的生成一个slider控件.

这种自动初始化是被"page"插件所控制,它会在它执行前后调度事件,并允许你在初始化前后操作页面, 或者甚至允许你提供你自己的初始化行为来阻止自动初始化. 要注意,这些事件每个"page"只会被触发一次,与每次页面在显示或者隐藏的show/hide事件刚刚相反.

pagebeforecreate

在页面正在初始化的时候触发(在初始化完成之前).

pagecreate

在页面正在初始化的时候触发(在初始化完成之后).

要注意,通过绑定 pagebeforecreate事件并且返回false, 你可以阻止页面插件它们自己的操作.

注意:"Page ID": jQuery Mobile中的page元素使用 ID 属性来存储他们的来源位置.当你在page上设置一个ID属性时将会通过ajax把该page加载到jQuery Mobile的"单一页面"环境. jQuery Mobile会用一个新的div("page")元素来包裹住该,并为你的ID页面保存所有css设置. 然而,这意味着你的ID属性将不会出现在这个"page"元素上,所以你在绑定page事件的时候考虑到这一点. (比如:pagebeforecreate, pagecreate ,等). 为了避免这个问题,你可以尝试使用class.

 

动画事件

jQuery Mobile公开了animationComplete 插件, 你可以添加或者移除一个class来实现css的过渡效果.

责任编辑:佚名 来源: filod
相关推荐

2011-07-19 17:03:31

jQuery Mobi默认配置

2012-02-07 10:05:40

jQuery MobijQuery Mobi

2011-09-01 13:08:16

JQuery Mobi事件方法

2011-07-20 14:11:24

响应布局jQuery Mobi

2011-07-19 15:01:16

jQuery Mobi易用性

2012-11-15 10:18:51

IBMdw

2011-09-02 10:41:51

2011-07-19 14:51:54

jQuery Mobi特性

2011-08-01 08:51:12

jQuery Mobi插件

2011-07-20 13:37:14

2011-07-21 14:57:34

jQuery Mobi

2011-09-01 10:21:52

jQuery Mobi元素

2011-05-26 16:28:08

Android jQuery

2011-09-05 16:43:00

jQuery Mobi

2011-07-21 16:10:11

button按钮jQuery Mobi

2009-09-18 13:28:41

Mobile Sens

2011-04-25 17:17:55

Gesture APIWindows Mob

2012-04-17 22:43:46

jQuery Mobi

2011-09-01 10:27:42

jQuery Mobi

2011-09-06 16:16:48

jQuery Mobi
点赞
收藏

51CTO技术栈公众号