5、jQuery Mobile 事件

       jQuery Mobile 除了支持所有标准的jQuery 时间外，还支持触摸、滚动、方向和页面（显示、隐藏、加载等）事件。

     

       1 初始化事件：jQuery 中我们一般使用$(document).ready(function(){});  在jQuery中一般使用‘pageinit’事件。它在页面初始化并完善样式之后触发。

          

 

     2 触摸事件

         tag：当敲击到某个元素上触发。

      

      taphold：当敲击到某个元素上并保持一秒触发。

    

$(document).on("pageinit","#pageone",function(){
  $("p").on("taphold",function(){
    $(this).hide();
  });                       
});

    swipeleft : 某个元素上从左滑动超过30px时触发。

    swiperight: 某个元素上从右滑动超过30px时触发。

   

 

    3 滚动事件

      scrollstart 和 scrollend  滚动开始和结束时触发。

     

 

 4 方向事件

     orientationchange 事件在设备的水平或者垂直方向发生改变时触发。添加在window对象上。

   

$(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%"});
  }
});

  

 5 页面事件

 

   Initialization  ： pagebeforecreate、pagecreate、pageinit：可以简单理解为：页面创建前、创建中、创建后触发。

$(document).on("pagebeforecreate",function(event){
  alert("触发 pagebeforecreate 事件！");
}); 
$(document).on("pagecreate",function(event){
  alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("触发 pageinit 事件！")
});

 

   load：页面加载属于外部事件。pagebeforeload、pagelode、pagelodefailed：加载请求发出之后、成功、失败触发。

   

$(document).on("pageload",function(event,data){
  alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被请求页面不存在。");
});

 

   过渡：pagebeforeshow、pageshow、pagebeforehide、pagehide: 新页面过渡动画开始前、新页面过渡动画完成后、当前页面过渡动画开始前、当前也买年过渡动画完成后触发。

   

$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
  alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
  alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
  alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
  alert("现在隐藏页面二");
});