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("现在隐藏页面二");
});