`

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,不知道这个怎么接收参数。

 

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

  • 大小: 45.2 KB
  • 大小: 45.7 KB
  • 大小: 43.6 KB
  • 大小: 37.7 KB
0
1
分享到:
评论
5 楼 曾老师 2014-09-22  
很喜欢。。
4 楼 白糖_ 2014-04-14  
blue33tian 写道
楼主啊 我在a便签的href属性后面加是?传递参数 在IE下面能传递但是在android下面就不行 知道是怎么回事吗?


不知道你是怎么获取问号后面的参数的

如果是通过我pagebeforechange事件来监听的话,可能会出问题,在执行url.href.search(pageUrl) != -1的时候,一直返回的是-1,这个让我也很纠结,所以现在功能的时候,我都没在URL后面打问号了,而是直接用js传递参数。 
3 楼 blue33tian 2014-04-14  
楼主啊 我在a便签的href属性后面加是?传递参数 在IE下面能传递但是在android下面就不行 知道是怎么回事吗?
2 楼 白糖_ 2014-04-01  
gundumw100 写道
我也碰到了同样的问题,一起研究
jquery mobile的确有很多坑爹的问题


是的,大家共同进步!
1 楼 gundumw100 2014-03-31  
我也碰到了同样的问题,一起研究
jquery mobile的确有很多坑爹的问题

相关推荐

    jQuery动画特效---精通JavaScript+jQuery

    第11课 - jQuery控制页面 - [精通JavaScript+jQuery] 第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery]...

    jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile 源码

    图书的源代部分; 还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南:jQuery Core+jQuery Plugin+...、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。

    一个使用Servlet+Jsp+Jdbc+H-ui+EasyUI+jQuery+Ajax的学生信息管理系统

    以前不知道哪里找到的一个系统,感觉很不错,使用文档,数据库文件,项目截图全都包括,后台使用Servlet+Jsp,前台用的H-ui+EasyUI+jQuery,很适合新手入门的学习,特别是代码里面许许多多的注释,让我受益匪浅,...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf

    jQuery Mobile的设计目标是跨平台兼容,能在iOS、Android、Windows Phone等多款主流移动操作系统上无缝运行。通过使用jQuery Mobile,开发者可以快速构建具有触摸友好的交互和流畅动画的移动应用和网站。 在本书中...

    android+phonegap+jquery mobile

    【标题】:“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板...

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案,它整合了多种技术来实现这一功能。 首先,我们来看“s2sh”。这是Struts2、Spring和Hibernate三者的简称,它们分别是MVC...

    HTML5+JQuery Mobile 移动端WebApp案例

    JQuery Mobile则是一个轻量级的JavaScript库,专门针对移动设备设计,它简化了触摸事件处理、页面导航和界面设计。主要特点包括: 1. **触控优化**:JQuery Mobile的UI组件都经过优化,确保在触摸屏设备上的表现...

    ASP+ajax+jQuery--顶-踩-无刷新【点赞】程式3.0 修正调试版

    ASP.NET、Ajax 和 jQuery 是构建动态网页应用的三个关键技术,它们在实现无刷新用户体验方面扮演着重要角色。本文将深入探讨这些技术如何协同工作,以及如何利用它们来创建一个"顶-踩-无刷新【点赞】"功能的程序。 ...

    基于SpringMVC+Spring+Hibernate+JQuery+Bootstrap框架的OA系统

    系统后端基于SpringMVC+Spring+Hibernate框架,前端页面采用JQuery+Bootstrap等主流技术; 流程引擎基于Snaker工作流;表单设计器基于雷劈网WEB表单设计器。 系统主要功能有: &gt;1.系统管理 &gt;&gt;系统管理包含有:基础...

    JqueryMobile页面间跳转时的参数传递

    在使用jQuery Mobile进行移动Web应用开发时,经常需要在不同页面之间传递参数。这种功能对于实现页面之间的数据交互至关重要。本文档将通过一个具体的代码示例来详细说明如何在jQuery Mobile中实现页面间的参数传递...

    jQuery-Mobile-Bootstrap-Theme-master

    《jQuery Mobile与Bootstrap主题整合详解》 在Web开发领域,jQuery Mobile和Bootstrap是两种非常流行的前端框架,它们各自为开发者提供了强大的工具和组件,以构建响应式、移动优先的网页应用。当我们谈论"jQuery-...

    jQuery-Mobile-Bootstrap-Theme

    **jQuery Mobile 和 Bootstrap 主题整合** `jQuery Mobile` 和 `Bootstrap` 是两个广泛使用的前端开发框架,它们各自在移动和Web应用设计上有着独特的优点。`jQuery Mobile` 专注于提供跨平台、触摸友好的UI组件,...

    HTML5+jQuery Mobile模板两套

    jQuery Mobile是一款轻量级的框架,专门用于简化移动设备上的Web开发。它建立在流行的JavaScript库jQuery之上,提供了一套统一的事件处理、动画效果和触控友好的用户界面组件。jQuery Mobile的核心特性包括: 1. **...

    HTML5+CSS3+JQueryMobile入门-源代码.zip

    JQueryMobile的核心特点是其页面和面板模型,它将一个复杂的网页拆分为多个独立的“页面”,通过AJAX进行无刷新加载,提升用户体验。此外,它还提供了许多预定义的CSS样式和主题,可以快速构建一致的移动界面,如...

    jquery-mobile-theme-174943-0

    在实际应用中,`jquery-mobile-theme-174943-0`可能包含了一些预设的样式和布局示例,方便开发者理解和学习如何使用这个主题。例如,可能会有一个设置页面,展示了如何配置不同的主题元素,如按钮、工具栏和列表项。...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站代码

    jQuery Mobile通过数据属性(data attributes)和自动页面导航系统简化了页面间的链接和脚本编写,使得开发者可以快速构建出具有良好交互性的移动应用。此外,它还支持主题定制,允许开发者自定义颜色和样式,以满足...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站

    jQuery Mobile则是一个轻量级的框架,专门用于简化移动设备上的交互设计和触摸事件处理: 1. 触摸优化:提供触控友好的组件和手势支持。 2. 主题系统:通过简单的类名应用一致的视觉风格。 3. 页格(Grids)和布局:...

    easyUi+jquery+common-file-upload +struts2带进度条的文件上传DEMO

    基于eclipse + easyUi1.2.6+common-fileupload + struts2实现带进度条的文件上传DEMO,具体效果跟思路可见我的博客:http://blog.csdn.net/jun55xiu/article/details/22042279

    用PhoneGap+jQueryMobile开发Android应用实例

    用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。

    html5+jquery mobile+android

    在Android平台上,通过WebView组件,可以将HTML5和jQuery Mobile的页面嵌入到原生应用中,实现混合应用开发。WebView不仅支持加载本地或远程的HTML页面,还能调用JavaScript代码,从而实现与Android原生功能的交互,...

Global site tag (gtag.js) - Google Analytics