jquery mobile 入门4 (事件)

来源：互联网发布：怎么在淘宝上传照片编辑：程序博客网时间：2024/05/16 15:51

jQuery Mobile 入门4

四. jQuery Mobile 事件

1. 事件介绍

在jQuery Mobile你可以使用任何标准的 jQuery 事件。

　　Jquery Mobile 事件包括：触摸事件、虚拟鼠标事件、设备方向事件、滚屏事件、页面加载事件、页面显示/隐藏事件、页面初始化事件、动画事件等。这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件，所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。

　　在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执行，而在jquery mobile中，使用pageCreate()事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在页面加载并创建时执行脚本，就需要绑定pageCreate()事件。

<script>
$(document).on("pagecreate","#pageone",function(){
   // jQuery 事件...
});
</script>

其中第二个参数 ("#pageone")为指定事件的页面id。

注意： jQuery Mobile on() 方法用于绑定事件到选中的元素上。

2. tap 与 taphold

　点击事件在用户点击元素时触发，点击事件的关键字为"tap"。如下代码：当点击p元素时，隐藏当前的p元素。

$("p").on("tap",function(){
  $(this).hide();
});

　　点击不放（长按）事件在点击并不放（大约一秒）后触发，关键字为"taphold"。如下代码：

$("p").on("taphold",function(){
  $(this).hide();
});

3. swipe （滑动事件）

滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件。即：swipe(滑动）、swipeleft(向左滑动）、swiperight(向右滑动)。

 $("button").on("swipe",function(){
  alert("滑动测试!");
});

4. 虚拟鼠标事件

jQuery Mobile为我们提供的虚拟鼠标事件有以下几种：

vmouseover：处理touch 或者 mouseover的正规化的事件；
vmousedown：处理touchstart 或者 mousedown 的正规化的事件；
vmousemove：处理touchmove 或者 mousemove 的正规化的事件；
vmouseup：处理touchend 或者 mouseup 的正规化的事件；
vclick：处理touchend 或者鼠标点击的正规化的事件；
vmousecancel：处理touch 或者 mouse 的mousecancel的正规化的事件。

如下代码，当我们移过鼠标时，p元素的内容隐藏。

  $("p").on("vmousemove",function(){
    $(this).hide();
  });

5. orientationchange （方向改变事件）

当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。要使用该事件时，要附加到window对象上。

$(window).on("orientationchange",function(){
    alert("方向有改变!");
});

　　回调函数可有一个参数，event对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）。

$(window).on("orientationchange",function(event){
    alert("方向是: " + event.orientation);
});

　　可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图。

$(window).on("orientationchange",function(){
    if(window.orientation == 0) {  // 纵向
        $("p").css({"background-color":"yellow","font-size":"300%"});
    }
    else {  //横向
       $("p").css({"background-color":"pink","font-size":"200%"});
    }
});

6. 滚屏事件（scrollstart 与 scrollstop）

jQuery Mobile提供了两种滚屏事件：滚屏开始(scrollstart)时触发和滚动结束(scrollstop)时触发。

$(document).on("scrollstart",function(){
    alert("开始滚动!");
});

7. 页面事件（page）

在jQuery Mobile 中与页面打交道的事件被分为四类：

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后;
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时;
Page Transition - 在页面过渡之前和之后;
Page Change - 当页面被更改，或遭遇失败时。

　　当 jQuery Mobile 中的页面进行初始化时，它会经历三个阶段：在页面创建前、页面创建、页面初始化。而我们在每个阶段触发的事件都可用于插入或操作代码。

在页面创建前使用"pagebeforecreate"事件，页面创建使用"pagecreate"、页面初始化使用"pageinit"。

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate 事件触发!");
}); 
$(document).on("pagecreate",function(event){
  alert("pagecreate 事件触发!");
});

　　无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或pageloadfailed（失败）。

$(document).on("pageload",function(event,data){
  alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert(";抱歉，被请求页面不存在。");
});

jQuery Mobile 还为我们提供了四个页面过渡事件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(){ // When leaving pagetwo
  alert("现在隐藏页面二");
});

0 0