jQuery Mobile事件

触摸与滑动事件

  1. tap触摸事件,点击目标进行隐藏
$(document).on("pageinit",function(){
   $("p").on("tap",function (){
   $(this).hide();
   });
});
  1. taphold长按事件,单击没有效果,长按后目标进行隐藏
$(document).on("pageinit",function(){
   $("p").on("taphold",function (){
   $(this).hide();
   });
});
  1. swipe滑动事件,左右滑动均会隐藏,上下滑动无反应
$(document).on("pageinit",function(){
   $("p").on("swipe",function (){
   $(this).hide();
   });
});
  1. swipeleft向左滑动处理
  2. swiperight向右滑动处理
  3. scrollstart滑动页面触发(上下滑动),开始滑动时弹窗
$(document).on("pageinit",function(){
   $(document).on("scrollstart",function (){
   alert("开始滑动");
   });
});
  1. scrollstop停止滑动触发
  2. orientationchange设备方向变化触发

jQuery Mobile 页面事件

页面加载事件

  1. pageinit在DOM元素加载完成后来进行处理页面元素加载完成后触发的事件
$(document).on("pageinit",function(){
    alert("1")
});
  1. pagebeforeload在任何页面加载请求之前触发
  2. pageload在页面已成功加载后触发
  3. pageloadfailed页面加载请求失败触发,给出一个不存在或者错误的外部页面链接,点击后会出现不存在的弹窗提示
$(document).on("pageloadfailed",function(event,data){
    alert("页面不存在");
});

页面过渡事件

  1. pagebeforeshow在转到其他页面之前先触发本事件
$(document).on("pagebeforeshow",function(){
    alert("触发pagebeforeshow  ");
});
  1. pageshow在转到其他页面之后触发
$(document).on("pageshow",function(){
    alert("触发pageshow  ");
});
  1. pagebeforehide在转到其他页面(隐藏本页面)之前先触发本事件
$(document).on("pagebeforehide",function(){
    alert("触发 pagebeforehide ");
});
  1. pagehide在转到其他页面(隐藏本页面)之后触发
$(document).on("pagehide",function(){
    alert("触发 pagehide ");
});

主页

底部

主页


页面更改事件

  • pagebeforechange在页面更改期间触发两次
$(document).on("pagebeforechange",function(){
    alert("触发pagebeforechange ");
});

你可能感兴趣的:(jQuery Mobile事件)