Jquery Mobile 学习教程之页面脚本分析

熊孩纸 阅读:174 2021-03-31 23:32:51 评论:0


页面的脚本

                 jQuery Mobile中通过AJAX请求的方式加载页面,在编写页面脚本时,需要与PC端开发页面区分开。通常情况下,页面在初始化时会触发pagecreate事件,在该事件中可以做一些页面组件初始化的动作;如果需要通过JavaScript代码改变当前的工作页面,可以调用jQuery Mobile中提供的changePage()方法,此外,还可以调用loadPage()方法来加载指定的外部页面,注入当前文档中。接下来我们逐一对这些常用的页面脚本中的事件与方法进行介绍。

               创建页面

               在jQuery Mobile中,页面是被请求后注入当前的DOM结构中,因此,jQuery 中提及的$(document)。ready()事件在jQuery Mobile中不会被重复执行,只有在初始化加载页面时才会被执行一次。如果要跟踪不同页面的内容注入当前的DOM结构,可以将页面中的"page"容器绑定pagecreate事件。该事件在页面初始化时触发,绝大多数的jQuery Mobile组件都在该事件之后进行一些数据的初始化。

            实例:jQuery Mobile中的pagecreate事件

           1. 功能说明

        新建一个HTML页面,添加一个Id号为"e1"的"page"容器,并将该容器与pagebeforecreate和pagecreate事件进行绑定。在页面执行时,通过绑定的事件跟踪执行的过程。

           2. 实现代码

       

<!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  <title>jQuery Mobile 中的pagecreate事件</title> 
 
  <meta name="viewport" content="width=device-width, 
 
  initial-scale=1" /> 
 
  <link  href="Css/jquery.mobile-1.0.1.min.css" 
 
  rel="Stylesheet" type="text/css" /> 
 
  <script src="Js/jquery-1.6.4.js" 
 
  type="text/javascript"></script> 
 
  <script src="Js/jquery.mobile-1.0.1.js" 
 
  type="text/javascript"></script> 
 
  <script type="text/javascript"> 
 
  $("#e1")。live("pagebeforecreate", function() { 
 
  alert("正在创建页面!"); 
 
  }) 
 
  $("#e1")。live("pagecreate", function() { 
 
  alert("页面创建完成!"); 
 
  }) 
 
  </script> 
 
  </head> 
 
  <body> 
 
  <div data-role="page" id="e1"> 
 
  <div data-role="header"><h1>创建页面</h1></div> 
 
  <div data-role="content"> 
 
  <p>页面创建完成!</p> 
 
  </div> 
 
  <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> 
 
  </div> 
 
  </body> 
 
  </html> 

页面效果:

源码分析

  在本实例中,Id号为"e1"的"page"容器绑定了pagebeforecreate和pagecreate两个事件。pagebeforecreate事件早于pagecreate事件,即在页面被加载、jQuery Mobile组件开始初始化前触发。通常在这一事件中,可以添加一些页面加载的动画提示效果,直到pagecreate事件触发时动画效果结束。

  在本实例的JavaScript代码中,既可以使用live()方法绑定元素触发的事件,还可以使用bind()与delegate()方法为绑定的元素添加指定的事件。


     跳转页面

     如果使用JavaScript代码切换当前显示的页面,可以调用jQuery Mobile中的changePage()方法。该方法可以设置跳转页面的URL地址、跳转时的动画效果和需要携带的数据,接下来通过一个简单的实例详细说明该方法的使用过程。

   使用changePage()方法跳转页面   

1. 功能说明

       新建一个HTML页面,在页面中显示“页面正在跳转中…”文字,然后调用changePage()方法,从当前页以“slideup”的动画切换效果跳转到“about.htm”页面。

       2. 实现代码

<!DOCTYPE html> 
 <html> 
 <head> 
     <title>jQuery Mobile 跳转页面</title> 
     <meta name="viewport" content="width=device-width, 
            initial-scale=1" />  
     <link  href="Css/jquery.mobile-1.0.1.min.css" 
            rel="Stylesheet" type="text/css" /> 
     <script src="Js/jquery-1.6.4.js" 
            type="text/javascript"></script> 
     <script src="Js/jquery.mobile-1.0.1.js" 
            type="text/javascript"></script> 
     <script type="text/javascript"> 
         $(function() { 
             $.mobile.changePage("about.htm", 
             { transition: "slideup" }); 
         }) 
     </script> 
 </head> 
 <body> 
   <div data-role="page" id="e1"> 
  <div data-role="header"><h1>跳转页面</h1></div> 
  <div data-role="content"> 
       <p>页面正在跳转中...</p> 
  </div> 
  <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> 
 </div> 
 </body> 
 </html>

页面效果:

源码分析

在本实例中,由于changePage()方法在页面加载时被执行,因此,在浏览主页面时,便直接跳转至目标页“about.htm”;使用changePage()方法除了可以跳转页面外,还能携带数据传递给跳转的目标页,如下面代码所示:
$.mobile.changePage("login.php",
  { type: "post",
    data: $("form#login").serialize()
  },
   "pop", false, false
)

上述代码表示:将Id号为“login”的表单数据进行序列化后,传递给“login.php"页面进行处理。另外,“pop”表示跳转时的页面效果,第一个“false”值表示跳转时的方向,如果为“true”则表示反方向进行跳转,默认值为“false”;第二个“false”值表示完成跳转后是否更新历史浏览记录,默认值为“true”,表示更新。

说明 当指定跳转的目标页面不存在或传递的数据格式不正确时,都会在当前页面出现一个错误信息提示框,几秒钟后自动消失,不影响当前页面的内容显示。



声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号