HTML5开发移动web应用―JQuery Mobile(4)-事件

jquery mobile中提供了丰富的事件处理和检测机制。

1.滚动事件

在Jquery Mobile中，使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件。以scrollStart为例，使用代码如下：

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

一个页面从激活到加载完毕，在jquery mobile中共被分为四个部分的事件，它们分别是：

Page InITialization - 在页面创建前，当页面创建时，以及在页面初始化之后

Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时

Page Transition - 在页面过渡之前和之后

Page Change - 当页面被更改，或遭遇失败时

 $(document).on("pagebeforecreate",function(event){
       alert(" pagebeforecreate ");
 }
    );
  $(document).on("pagecreate",function(event){
       alert(" pagecreate ");
 }
    );
 $(document).on("pageinit",function(event){
   alert(" pageinit ") }
    );
     

下面是来自w3cschool的实例代码，可以监听设备方向的变化，并在设备方向变化后设置不同的样式;

 $(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%"}
    );
   }
 }
    );
 

Jquery Mobile中提供了丰富的事件处理和检测机制。

1.滚动事件

在Jquery Mobile中，使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件。以scrollStart为例，使用代码如下：

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

一个页面从激活到加载完毕，在jquery mobile中共被分为四个部分的事件，它们分别是：

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后

Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时

Page Transition - 在页面过渡之前和之后

Page Change - 当页面被更改，或遭遇失败时

 $(document).on("pagebeforecreate",function(event){
       alert(" pagebeforecreate ");
 }
    );
  $(document).on("pagecreate",function(event){
       alert(" pagecreate ");
 }
    );
 $(document).on("pageinit",function(event){
   alert(" pageinit ") }
    );
     

下面是来自w3cschool的实例代码，可以监听设备方向的变化，并在设备方向变化后设置不同的样式;

 $(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%"}
    );
   }
 }
    );
     

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！