jQuery Mobile事件,开发全解+完美注释

时间:2023-03-08 20:32:55
jQuery Mobile事件,开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏)

jQuery Mobile事件全解

jQuery Mobile 所有class选项

jQuery Mobile 所有data-*选项

jQuery Mobile事件全解:

//使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行
$(document).on("pagecreate","#pageone",function(){
    // jQuery 事件...
});

//点击事件
$("p").on("tap",function(){
    $(this).hide();
});

//长按事件   点击不放(长按) 事件在点击并不放(大约一秒)后触发
$("p").on("taphold",function(){
    $(this).hide();
});

//滑动事件是在用户一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件:
$("p").on("swipe",function(){
    $("span").text("滑动检测!");
});

//向左滑动事件在用户向左拖动元素大于30px时触发:
$("p").on("swipeleft",function(){
    alert("向左滑动!");
});

//向右滑动事件在用户向右拖动元素大于30px时触发:
$("p").on("swiperight",function(){
    alert("向右滑动!");
});

//scrollstart 事件是在用户开始滚动页面时触发:
$(document).on("scrollstart",function(){
    alert("开始滚动!");
});

//scrollstop 事件是在用户停止滚动页面时触发:
$(document).on("scrollstop",function(){
    alert("停止滚动!");
});

//屏幕翻转事件
$(window).on("orientationchange",function(event){
    alert("方向是: " + event.orientation);
});

////页面初始化事件
//pagebeforecreate  当页面即将初始化,并且在 jQuery Mobile 已开始增强页面之前,触发该事件。
//pagecreate    当页面已创建,但增强完成之前,触发该事件。
//pageinit  当页面已初始化,并且在 jQuery Mobile 已完成页面增强之后,触发该事件。

////页面加载事件
//pagebeforeload    在任何页面加载请求作出之前触发。
//pageload  在页面已成功加载并插入 DOM 后触发。
//pageloadfailed    如果页面加载请求失败,则触发该事件。默认地,将显示 "Error Loading Page" 消息。

////过滤事件
//pagebeforeshow    在"去的"页面触发,在过渡动画开始前。
//pageshow  在"去的"页面触发,在过渡动画完成后。
//pagebeforehide    在"来的"页面触发,在过渡动画开始前。
//pagehide  在"来的"页面触发,在过渡动画完成后。

$(document).on("pagebeforeshow","#pagetwo",function(){ //当进入页面二时
    alert("页面二即将显示");
});