触摸与滑动事件
- tap触摸事件，点击目标进行隐藏
$(document).on("pageinit",function(){
$("p").on("tap",function (){
$(this).hide();
});
});
- taphold长按事件，单击没有效果，长按后目标进行隐藏
$(document).on("pageinit",function(){
$("p").on("taphold",function (){
$(this).hide();
});
});
- swipe滑动事件，左右滑动均会隐藏，上下滑动无反应
$(document).on("pageinit",function(){
$("p").on("swipe",function (){
$(this).hide();
});
});
- swipeleft向左滑动处理
- swiperight向右滑动处理
- scrollstart滑动页面触发（上下滑动），开始滑动时弹窗
$(document).on("pageinit",function(){
$(document).on("scrollstart",function (){
alert("开始滑动");
});
});
- scrollstop停止滑动触发
- orientationchange设备方向变化触发
jQuery Mobile 页面事件
页面加载事件
- pageinit在DOM元素加载完成后来进行处理页面元素加载完成后触发的事件
$(document).on("pageinit",function(){
alert("1")
});
- pagebeforeload在任何页面加载请求之前触发
- pageload在页面已成功加载后触发
- pageloadfailed页面加载请求失败触发，给出一个不存在或者错误的外部页面链接，点击后会出现不存在的弹窗提示
$(document).on("pageloadfailed",function(event,data){
alert("页面不存在");
});
页面过渡事件
- pagebeforeshow在转到其他页面之前先触发本事件
$(document).on("pagebeforeshow",function(){
alert("触发pagebeforeshow ");
});
- pageshow在转到其他页面之后触发
$(document).on("pageshow",function(){
alert("触发pageshow ");
});
- pagebeforehide在转到其他页面（隐藏本页面）之前先触发本事件
$(document).on("pagebeforehide",function(){
alert("触发 pagebeforehide ");
});
- pagehide在转到其他页面（隐藏本页面）之后触发
$(document).on("pagehide",function(){
alert("触发 pagehide ");
});
<div data-role="page" id="page1">
<div data-role="header">
<h1>主页</h1>
</div>
<div data-role="content">
<p><a href="#page2">跳转到二</a></p>
</div>
<div data-role="footer">
<h1>底部</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>主页</h1>
</div>
<div data-role="content">
页面更改事件
- pagebeforechange在页面更改期间触发两次
$(document).on("pagebeforechange",function(){
alert("触发pagebeforechange ");
});
