jQuery技术

Android+Jquery Mobile学习系列(4)-页面转场及参数传递

字号+ 作者:H5之家 来源:H5之家 2017-01-04 09:00 我要评论( )

Android+Jquery Mobile学习系列(4)-页面转场及参数传递

关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同。撸主前段时间就是很急躁地上手开发程序,结果在页面转场和参数传递的时候遇到各种奇怪的问题,最后几乎打算删掉html,改用Android原生layout来做程序了。

不得不说,Jquery mobile给我们这种做Java Web项目的人带来了很多新鲜的玩意儿,虽然多多少少有些不适应,但是我们得被动接受,久而久之就习惯。

前面一对废话结束,下面正式开始本节内容。

  • 页面跳转
  • 页面跳转分为两种:Jquery mobile的跳转和传统的location跳转,所谓入乡随俗,在使用了jquery mobile之后,我推荐尽量用这种跳转方式。先用例子简单介绍,最后再说明jquery mobile跳转的好处。

    有三个页面(page1.html、page2.html、page3.html),主页面是page1,点击主页面两个按钮可以分别到page2和page3,[页面2]按钮使用<a>标签的href属性来定位page2的路径,[页面3]按钮使用javascript的location来定位page3的路径。

    【page1.html】

    <body> <div data-role="page" id="page1"> <div data-theme="b" data-role="header" data-position="fixed"> <h3> 页面1 </h3> </div> <div data-role="content"> <a data-role="button" href="page2.html"> 页面2 </a> <script> function goPage3(){ window.location = "page3.html"; } </script> <a data-role="button" href="#" onclick="goPage3()"> 页面3 </a> </div> </div> </body>

     【page2.html】

    <body> <div data-role="page" id="page2"> <div data-theme="b" data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" href="#" class="ui-btn-left" data-icon="back">返回</a> <h3> 页面2 </h3> </div> <div data-role="content"> 页面2 </div> </div> </body>

     【page3.html】

    <body> <div data-role="page" id="page3"> <div data-theme="b" data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" href="#" class="ui-btn-left" data-icon="back">返回</a> <h3> 页面3 </h3> </div> <div data-role="content"> 页面3 </div> </div> </body>

    编码完成,看下具体效果图:

    这是page1.html页面,注意看浏览器导航路径!


    这是page2.html,路径有点特别


     

    这是page3.html,路径是直接指向page3的


     

    从上面几个图可以看出,跳转到page2使用的是jquery mobile的AJAX转场形式,而跳转到page3使用的是我们常见的location跳转方式。

    在page2页面点击查看源码,你会发现源码还是page1页面的。


     


    Jquery Mobile跳转可以使用<a>标签来完成,也可以用jquery mobile自带的chagePage方法完成。

    <!-- 方式一 --> <a href="page2.html">页面二</a> <!-- 方式二 --> <script> $.mobile.changePage("page2.html"); </script>

    如果不想让<a>标签以Jquery Mobile形式跳转,则需要增加一个属性:data-ajax="false"

    <!-- 方式一 --> <a href="page3.html" data-ajax="false">页面三</a> <!-- 方式二 --> <script> window.location = "page3.html"; </script>
  • Jquery Mobile转场注意事项
  • 使用Jquery Mobile转场容易,但是转场后就有很多事项要注意了,不然你会遇到很多问题。

    ①AJAX只加载<body>标签里的内容

    当用户点击一个jQuery Mobile驱动的网站的链接,那默认会通过Ajax请求页面。(而不是是浏览器通过默认的链接方法家在整个页面)。当请求发出以后,框架会接收到内容,但是他只会将请求的页面的body 内容插入到DOM中(或者只是 data-role="page" 的容器),这就意味着head标签中的元素不会被请求到。

    这就意味着在HEAD中引用的脚本和样式在用通过AJAX加载后不会起作用,只能通过普通的HTTP请求执行。当编写jQuery Mobile 网站的脚本时,两种情况都要因为考虑。通过AJAX加载的页面会无视head 中的内容是因为重新执行相同的JS的几率是很高的(因为整站的每个页面可能都引用同样的JS文件)。

    所以要想让所有子页面的js能成功被执行,要么就将js写到主页面,要么将js写到子页面的<body>标签内。(这个我更推荐将js放到主页面,因为同事发现在自己的pad上<body>中加入script没效果)

    ②子页面不支持页面内跳转

    我们知道Jquery支持一个html中包含多个<div data-role="page">,只要有id,就可以进行页面切换。

    <div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">Go to Page Two</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">Go to Page One</a> </div> </div>

    但是这里有一个巨坑!我先前就是被这个坑困住了,几乎到彻底放弃:只有主页面支持页面内page跳转,使用Jquery Mobile转场的子页面都不支持页面内page跳转!

    简单说明一下:

    假设page1.html是入口主页面,它里面有两个page(id为page11、page12)。

    page1.html可以跳转到page2.html,page2.html也有俩page(id为page21、page22)。

    那么在page1.html页面,page11可以跳转到page12;但是如果转场到page2.html页面,page21无法跳转到page22!

    这个有一个解决办法,就是禁用AJAX转场,比如在<a>标签中增加属性data-ajax="false"。

    <a href="page2.html" data-ajax="false">页面二</a>

    如果这样,page2.html必须引入完整的相关javascript和css文件。

    ③ 使用 pageInit(),而不是$(document).ready()

     

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

    相关文章
    • jQuery.validationEngine.js学习

      jQuery.validationEngine.js学习

      2017-01-02 15:02

    • jQuery学习笔记--jqGrid的属性列表

      jQuery学习笔记--jqGrid的属性列表

      2017-01-02 14:04

    • JavaScript学习总结(四)

      JavaScript学习总结(四)

      2017-01-01 16:02

    • JQuery 学习:切换HTML元素的显示与隐藏

      JQuery 学习:切换HTML元素的显示与隐藏

      2016-12-30 15:01

    网友点评