觸摸與滑動事件
- tap觸摸事件贰您,點擊目標進行隱藏
$(document).on("pageinit",function(){
$("p").on("tap",function (){
$(this).hide();
});
});
- taphold長按事件刁赖,單擊沒有效果逛钻,長按后目標進行隱藏
$(document).on("pageinit",function(){
$("p").on("taphold",function (){
$(this).hide();
});
});
- swipe滑動事件贬蛙,左右滑動均會隱藏雨女,上下滑動無反應(yīng)
$(document).on("pageinit",function(){
$("p").on("swipe",function (){
$(this).hide();
});
});
- swipeleft向左滑動處理
- swiperight向右滑動處理
- scrollstart滑動頁面觸發(fā)(上下滑動),開始滑動時彈窗
$(document).on("pageinit",function(){
$(document).on("scrollstart",function (){
alert("開始滑動");
});
});
- scrollstop停止滑動觸發(fā)
- orientationchange設(shè)備方向變化觸發(fā)
jQuery Mobile 頁面事件
頁面加載事件
- pageinit在DOM元素加載完成后來進行處理頁面元素加載完成后觸發(fā)的事件
$(document).on("pageinit",function(){
alert("1")
});
- pagebeforeload在任何頁面加載請求之前觸發(fā)
- pageload在頁面已成功加載后觸發(fā)
- pageloadfailed頁面加載請求失敗觸發(fā)阳准,給出一個不存在或者錯誤的外部頁面鏈接氛堕,點擊后會出現(xiàn)不存在的彈窗提示
$(document).on("pageloadfailed",function(event,data){
alert("頁面不存在");
});
頁面過渡事件
- pagebeforeshow在轉(zhuǎn)到其他頁面之前先觸發(fā)本事件
$(document).on("pagebeforeshow",function(){
alert("觸發(fā)pagebeforeshow ");
});
- pageshow在轉(zhuǎn)到其他頁面之后觸發(fā)
$(document).on("pageshow",function(){
alert("觸發(fā)pageshow ");
});
- pagebeforehide在轉(zhuǎn)到其他頁面(隱藏本頁面)之前先觸發(fā)本事件
$(document).on("pagebeforehide",function(){
alert("觸發(fā) pagebeforehide ");
});
- pagehide在轉(zhuǎn)到其他頁面(隱藏本頁面)之后觸發(fā)
$(document).on("pagehide",function(){
alert("觸發(fā) pagehide ");
});
<div data-role="page" id="page1">
<div data-role="header">
<h1>主頁</h1>
</div>
<div data-role="content">
<p><a href="#page2">跳轉(zhuǎn)到二</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在頁面更改期間觸發(fā)兩次
$(document).on("pagebeforechange",function(){
alert("觸發(fā)pagebeforechange ");
});