码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5开发移动web应用—JQuery Mobile(4)-事件

时间:2016-03-14 18:57:15      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

Jquery Mobile中提供了丰富的事件处理和检测机制。

1.滚动事件

在Jquery Mobile中,使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件。以scrollStart为例,使用代码如下:

$(document).on("scrollstart",function(){
  alert("开始滚动!");
});
2.界面相关的事件

一个页面从激活到加载完毕,在jquery mobile中共被分为四个部分的事件,它们分别是:

Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后

Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时

Page Transition - 在页面过渡之前和之后

Page Change - 当页面被更改,或遭遇失败时

其中,在页面初始化的部分,jquery mobile又将其分为页面创建前(pagebeforecreate)/页面创建(pagecreate)/页面初始化(pageinit)这三个阶段,在每个阶段中都可以执行相应的动作,示例代码如下:

$(document).on("pagebeforecreate",function(event){
  alert(" pagebeforecreate ");
}); 
$(document).on("pagecreate",function(event){
  alert(" pagecreate ");
});
$(document).on("pageinit",function(event){
  alert(" pageinit ")
});
3.关于设备方向

下面是来自w3cschool的实例代码,可以监听设备方向的变化,并在设备方向变化后设置不同的样式;

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});



HTML5开发移动web应用—JQuery Mobile(4)-事件

标签:

原文地址:http://blog.csdn.net/fareise/article/details/50886885

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!