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

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

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

  • 页面跳转

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

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

【page1.html】↓

  1. <body>
  2. <div data-role="page" id="page1">
  3. <div data-theme="b" data-role="header" data-position="fixed">
  4. <h3>
  5. 页面1
  6. </h3>
  7. </div>
  8. <div data-role="content">
  9. <a data-role="button" href="page2.html">
  10. 页面2
  11. </a>
  12. <script>
  13. function goPage3(){
  14. window.location = "page3.html";
  15. }
  16. </script>
  17. <a data-role="button" href="#" onclick="goPage3()">
  18. 页面3
  19. </a>
  20. </div>
  21. </div>
  22. </body>

【page2.html】↓

  1. <body>
  2. <div data-role="page" id="page2">
  3. <div data-theme="b" data-role="header" data-position="fixed">
  4. <a data-role="button" data-rel="back" href="#" class="ui-btn-left" data-icon="back">返回</a>
  5. <h3>
  6. 页面2
  7. </h3>
  8. </div>
  9. <div data-role="content">
  10. 页面2
  11. </div>
  12. </div>
  13. </body>

【page3.html】↓

  1. <body>
  2. <div data-role="page" id="page3">
  3. <div data-theme="b" data-role="header" data-position="fixed">
  4. <a data-role="button" data-rel="back" href="#" class="ui-btn-left" data-icon="back">返回</a>
  5. <h3>
  6. 页面3
  7. </h3>
  8. </div>
  9. <div data-role="content">
  10. 页面3
  11. </div>
  12. </div>
  13. </body>

编码完成，看下具体效果图：

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

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

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

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

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

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

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

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

  1. <!-- 方式一 -->
  2. <a href="page3.html" data-ajax="false">页面三</a>
  3. <!-- 方式二 -->
  4. <script>
  5. window.location = "page3.html";
  6. </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，就可以进行页面切换。

  1. <div data-role="page" id="pageone">
  2. <div data-role="content">
  3. <a href="#pagetwo">Go to Page Two</a>
  4. </div>
  5. </div>
  6. <div data-role="page" id="pagetwo">
  7. <div data-role="content">
  8. <a href="#pageone">Go to Page One</a>
  9. </div>
  10. </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"。

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

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

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

（这段话直接摘自中文API站）你学jquery的第一件事就是在
$(document).ready()函数中写代码，所以一切都在dom元素加载后执行。但是在jQuery
Mobile中，AJAX会根据你的导航把每个页面的内容加载到dom中，而DOM ready
函数只是在第一个页面加载完毕才会执行。所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。

之所以要这么做的原因就是第①点，Jquery Mobile的跳转是基于AJAX的，所以ready()事件只会在主页面出发，子页面完全没效果。

要想在子页面加载时做一些初始化操作就得这样写：

  1. $(document).on("pageinit","#page1",function(){
  2. //do something...
  3. });

"#page1"是指需要初始化哪个page，所以这里引出了下一个注意事项“每个page的id一定要唯一”！

④每个page的id一定要唯一

如果整个应用都是使用Jquery mobile转场的话，那么所有html中的<div data-role="page" id="">这个id值都要不一样！只有ID不一样，才能让每个页面正确执行pageinit事件。

  1. $(document).on("pageinit","#page1",function(){
  2. //do something...
  3. });
  4. $(document).on("pageinit","#page2",function(){
  5. //do something...
  6. });
  7. $(document).on("pageinit","#page3",function(){
  8. //do something...
  9. });

⑤找页面元素最好从page id开始找

第④点说了，page的id一定要唯一，但是page下的元素的id在不同html页面是可以重复的，为了准确找到page子元素，我建议按照下面这样的格式来寻找：[$("page id").find("子元素")]

  1. <script>
  2. $("#page1").find("#header_h1").html("页面一");
  3. $("#page2").find("#header_h1").html("页面二");
  4. $("#page3").find("#header_h1").html("页面三");
  5. </script>
  • 参数传递

在做java web项目的时候，完全不担心参数传递问题，但是HTML开发却跟java web有很大区别。

首先说明window.location的形式跳转到第二个页面如何接收参数。

一般跳转都是一个URL，而在URL后面接一个问号字符串"?xx=xx"就是带参数传递了，在第二个页面的时候可以获取当前页面的URL，再解析问号后面的字符串即可获得指定参数。

假设这是page1.html的跳转URL

  1. <script>
  2. window.location = "page2.html?id=123&name=ABC";
  3. </script>

在page2.html可以这样获得参数：

  1. <script>
  2. var data = $.getUrlParam(window.location.href);
  3. alert("URL:"+window.location.href);
  4. alert("ID:"+data.id);
  5. alert("NAME:"+data.name);
  6. </script>

我封装了一个$.getUrlParam方法用于解析URL参数：

  1. <script>
  2. /**
  3. * 解析URL中的参数
  4. * @param {url路径} string
  5. * @returns {返回object<key,value>}
  6. */
  7. $.getUrlParam = function(string) {
  8. var obj = new Object();
  9. if (string.indexOf("?") != -1) {
  10. var string = string.substr(string.indexOf("?") + 1);
  11. var strs = string.split("&");
  12. for (var i = 0; i < strs.length; i++) {
  13. var tempArr = strs[i].split("=");
  14. obj[tempArr[0]] = tempArr[1];
  15. }
  16. }
  17. return obj;
  18. }
  19. </script>

而如果用Jquery Mobile的形式传递的话，则需要了解一个事件[pagebeforechange]，这个事件简单说就是在页面转场时触发，此时转场页面元素已经到位，你在这个事件内直接操作转场页面元素或js方法以达到参数传递的作用。

我是从这个博客看到这种传递参数的方式的。

  1. <script>
  2. $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {
  3. if (typeof data.toPage != "string") {
  4. var url = $.mobile.path.parseUrl(e.target.baseURI);
  5. if (url.href.search(pageUrl) != -1) {
  6. //从url中解析参数
  7. var params = $.getUrlParam(url.href);
  8. var page = $(e.target).find("#子页面page ID");
  9. page.find("#id").val(params.id);
  10. page.find("#name").html(params.name);
  11. }
  12. }
  13. }
  14. $.mobile.changePage("page2.html?id=123&name=ABC");
  15. </script>

注：上面代码通过[$(e.target).find("#子页面page ID");]获取的是page2.html的page id，随后再通过它找到自己的子元素进行数据初始化操作。

想了解更多pagebeforechange事件，可以自行网上搜索关键字查看，这类文章非常多！

目前我还有两个疑问：

一个是通过[$.mobile.changePage]跳转时，可以传入data属性，这个我不知道子页面怎么去接收。

  1. $.mobile.changePage({
  2. 　　url: "searchresults.php",
  3. 　　type: "get",
  4. 　　data: $("form#search").serialize()
  5. });

第二个是如果用<form action="page2.html">...</form>的形式提交表单数据到page2，不知道这个怎么接收参数。

因为目前用得还不深，等随后有相关开发需求再研究吧。

Android+Jquery Mobile学习系列(4)-页面转场及参数传递的更多相关文章

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

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  2. Android+Jquery Mobile学习系列(6)-个人信息设置

    本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...

  3. Android+Jquery Mobile学习系列-目录

    最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以 ...

  4. Android+Jquery Mobile学习系列(9)-总结和代码分享

    经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...

  5. Android+Jquery Mobile学习系列(7)-保险人信息

    [保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...

  6. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  7. Android+Jquery Mobile学习系列(8)-保单/生日提醒功能

    其实这个App基本功能早已做完,并且交给老婆试用去了.但由于最近项目要保证稳定,所以持续加班,没有时间写最后一点内容,本节也就简单截图做个说明,不详细叙述实现方式.我会把代码上传到最后一章中,有兴趣的 ...

  8. Android+Jquery Mobile学习系列(3)-创建Android项目

    前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据. 首先创建一个Android Application项 ...

  9. Android+Jquery Mobile学习系列(5)-SQLite数据库

    SQLite是轻量级的.嵌入式的.关系型数据库,目前已经在iPhone.Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠. 因为Android已经集成了SQLit ...

随机推荐

  1. Echarts 出现不明竖线解决方案

    Echarts出现了不明竖线,百思不得其解.去查相应的解决方案也没有找到. 后来自己点来点去,突然感觉像是上一个Echarts遗留的. 然后去Echarts官网看到了 clear()方法,这个方法可以 ...

  2. Less——less基本使用

    基本概况 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node.浏览器 ...

  3. 我的 Windows 10 的基本配置

    Windows 10 的基本配置 功能性 开启 .Net Framework 3.5(包括 .NET 2.0 和 3.0) 旧版本 Windows 10 默认只安装了 .Net Framework 4 ...

  4. 阿里云ECS远程桌面连接失败

    管理=>本实例安全组=>配置规则=>配置3389端口

  5. Gorgeous Sequence 题解 (小清新线段树)

    这道题被学长称为“科幻题” 题面 事实上,并不是做法科幻,而是“为什么能这么做?”的解释非常科幻 换句话说,复杂度分析灰常诡异以至于吉如一大佬当场吃书 线段树维护的量:区间和sum,区间最大值max1 ...

  6. CPU指令、机器码、程序和汇编语言

    一.指令 指令就是指挥机器工作的指示和命令.控制器靠指令指挥机器工作,人们用指令表达自己的意图,并交给控制器执行.一台计算机所能执行的各种不同指令的全体,叫做计算机的指令系统或指令集,每一台计算机均有 ...

  7. 如何使用 Python 创建一名可操控的角色玩家

    在 这个系列的第一篇文章 中,我解释了如何使用 Python 创建一个简单的基于文本的骰子游戏.在第二部分中,我向你们展示了如何从头开始构建游戏,即从 创建游戏的环境 开始.但是每个游戏都需要一名玩家 ...

  8. BZOJ 3489: A simple rmq problem KDtree

    Code: #include<bits/stdc++.h> #define maxn 200000 #define inf 100000000 #define mid ((l+r)> ...

  9. cf 337 div2 c

    C. Harmony Analysis time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  10. 铁大FaceBook的使用体验副本

    铁大FaceBook是一个类似QQ和微信等聊天程序的缩小版网站,并且其针对领域较为狭窄:即只针对校园的学生和导员等人员.但其有值得推广的潜力性和可能性. 对于使用它的体验:第一点我感觉这个网站的界面很 ...