Android+Jquery Mobile学习系列(4)-页面转场及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为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】↓
- <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()
(这段话直接摘自中文API站)你学jquery的第一件事就是在
$(document).ready()函数中写代码,所以一切都在dom元素加载后执行。但是在jQuery
Mobile中,AJAX会根据你的导航把每个页面的内容加载到dom中,而DOM ready
函数只是在第一个页面加载完毕才会执行。所以要在任何新页面加载并创建是执行脚本,就需要绑定pageinit事件。
之所以要这么做的原因就是第①点,Jquery Mobile的跳转是基于AJAX的,所以ready()事件只会在主页面出发,子页面完全没效果。
要想在子页面加载时做一些初始化操作就得这样写:
- $(document).on("pageinit","#page1",function(){
- //do something...
- });
"#page1"是指需要初始化哪个page,所以这里引出了下一个注意事项“每个page的id一定要唯一”!
④每个page的id一定要唯一
如果整个应用都是使用Jquery mobile转场的话,那么所有html中的<div data-role="page" id="">这个id值都要不一样!只有ID不一样,才能让每个页面正确执行pageinit事件。
- $(document).on("pageinit","#page1",function(){
- //do something...
- });
- $(document).on("pageinit","#page2",function(){
- //do something...
- });
- $(document).on("pageinit","#page3",function(){
- //do something...
- });
⑤找页面元素最好从page id开始找
第④点说了,page的id一定要唯一,但是page下的元素的id在不同html页面是可以重复的,为了准确找到page子元素,我建议按照下面这样的格式来寻找:[$("page id").find("子元素")]
- <script>
- $("#page1").find("#header_h1").html("页面一");
- $("#page2").find("#header_h1").html("页面二");
- $("#page3").find("#header_h1").html("页面三");
- </script>
- 参数传递
在做java web项目的时候,完全不担心参数传递问题,但是HTML开发却跟java web有很大区别。
首先说明window.location的形式跳转到第二个页面如何接收参数。
一般跳转都是一个URL,而在URL后面接一个问号字符串"?xx=xx"就是带参数传递了,在第二个页面的时候可以获取当前页面的URL,再解析问号后面的字符串即可获得指定参数。
假设这是page1.html的跳转URL
- <script>
- window.location = "page2.html?id=123&name=ABC";
- </script>
在page2.html可以这样获得参数:
- <script>
- var data = $.getUrlParam(window.location.href);
- alert("URL:"+window.location.href);
- alert("ID:"+data.id);
- alert("NAME:"+data.name);
- </script>
我封装了一个$.getUrlParam方法用于解析URL参数:
- <script>
- /**
- * 解析URL中的参数
- * @param {url路径} string
- * @returns {返回object<key,value>}
- */
- $.getUrlParam = function(string) {
- var obj = new Object();
- if (string.indexOf("?") != -1) {
- var string = string.substr(string.indexOf("?") + 1);
- var strs = string.split("&");
- for (var i = 0; i < strs.length; i++) {
- var tempArr = strs[i].split("=");
- obj[tempArr[0]] = tempArr[1];
- }
- }
- return obj;
- }
- </script>
而如果用Jquery Mobile的形式传递的话,则需要了解一个事件[pagebeforechange],这个事件简单说就是在页面转场时触发,此时转场页面元素已经到位,你在这个事件内直接操作转场页面元素或js方法以达到参数传递的作用。
我是从这个博客看到这种传递参数的方式的。
- <script>
- $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {
- if (typeof data.toPage != "string") {
- var url = $.mobile.path.parseUrl(e.target.baseURI);
- if (url.href.search(pageUrl) != -1) {
- //从url中解析参数
- var params = $.getUrlParam(url.href);
- var page = $(e.target).find("#子页面page ID");
- page.find("#id").val(params.id);
- page.find("#name").html(params.name);
- }
- }
- }
- $.mobile.changePage("page2.html?id=123&name=ABC");
- </script>
注:上面代码通过[$(e.target).find("#子页面page ID");]获取的是page2.html的page id,随后再通过它找到自己的子元素进行数据初始化操作。
想了解更多pagebeforechange事件,可以自行网上搜索关键字查看,这类文章非常多!
目前我还有两个疑问:
一个是通过[$.mobile.changePage]跳转时,可以传入data属性,这个我不知道子页面怎么去接收。
- $.mobile.changePage({
- url: "searchresults.php",
- type: "get",
- data: $("form#search").serialize()
- });
第二个是如果用<form action="page2.html">...</form>的形式提交表单数据到page2,不知道这个怎么接收参数。
因为目前用得还不深,等随后有相关开发需求再研究吧。
Android+Jquery Mobile学习系列(4)-页面转场及参数传递的更多相关文章
- Android+Jquery Mobile学习系列(4)-页面跳转及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...
- Android+Jquery Mobile学习系列(6)-个人信息设置
本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...
- Android+Jquery Mobile学习系列-目录
最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以 ...
- Android+Jquery Mobile学习系列(9)-总结和代码分享
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...
- Android+Jquery Mobile学习系列(7)-保险人信息
[保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...
- Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...
- Android+Jquery Mobile学习系列(8)-保单/生日提醒功能
其实这个App基本功能早已做完,并且交给老婆试用去了.但由于最近项目要保证稳定,所以持续加班,没有时间写最后一点内容,本节也就简单截图做个说明,不详细叙述实现方式.我会把代码上传到最后一章中,有兴趣的 ...
- Android+Jquery Mobile学习系列(3)-创建Android项目
前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据. 首先创建一个Android Application项 ...
- Android+Jquery Mobile学习系列(5)-SQLite数据库
SQLite是轻量级的.嵌入式的.关系型数据库,目前已经在iPhone.Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠. 因为Android已经集成了SQLit ...
随机推荐
- SQl基本操作——视图
视图适合频繁查询的表:将一个查询结果作为虚拟表提供给开发人员.安全性高,视图只能查询不能修改,它是一张虚拟表.查询方便,逻辑清晰,但是性能低,一般情况下不如自己写sql语句. --创建视图 creat ...
- 【译】x86程序员手册13-第5章 内存管理
Chapter 5 Memory Management 内存管理 The 80386 transforms logical addresses (i.e., addresses as viewed b ...
- ADODB.Stream
读写文本文件时出现了乱码,找到了ADODB.Stream,可以指定字符集读取文本 Function ReadUTF() Filename = "F:\vba\2018 - new\2018- ...
- 微信小程序——weui的使用
使用在根目录中复制weui.wxss,app.wxss中引入 在weui.io中查看到自己想要的样式表后,到第二个网站复制代码,复制到自己的项目中即可 <!--pages/register/re ...
- UGUI世界坐标转换为UI本地坐标(游戏Hud的实现)
实现世界坐标的原理是: 世界坐标和UGUI的坐标分属两个坐标系,他们之间是无法进行转换的,需要通过屏幕坐标系来进行转换(因为屏幕坐标是固定的),即先将游戏场景中的世界坐标通过游戏场景Camera转化为 ...
- 【GC】
using 语句适用于清理单个非托管资源的情况,而多个非托管对象的清理最好以 try-finnaly 来实现,因为嵌套的 using 语句可能存在隐藏的 Bug.内层 using 块引发异常时,将不能 ...
- select 多选 和单选,分组
<select name="group"> <option value="1">北京</option> <option ...
- Bullet:Python的函数中参数是引用吗?
别的语言中关于函数有传值和传引用的区分. 关于此,流传很广的一个说法是 他们在现象的区别之一就是值传递后的变化,受到影响的就是引用,未受到影响的就是传值. 在学习中,也曾碰到过这个问题,网上关于这 ...
- C++中的各种进制转换函数汇总及学习
一.指定格式输出 1.C中指定格式输出 printf(); //按八进制格式输出,保留5位高位补零 printf(); //按十进制格式输出,保留3位高位补零 printf(); //按十六进制格式输 ...
- [CodeForces] CF226D The table
Harry Potter has a difficult homework. Given a rectangular table, consisting of n × m cells. Each ce ...