PhoneGap中文网

 找回密码
 立即注册
查看: 21981|回复: 8

JqueryMobile 页面跳转传值 Demo

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
发表于 2014-2-20 21:45:25 | 显示全部楼层 |阅读模式
        原理:

        通过$(document).bind("pagebeforechange", handleChangePage);来绑定pagebeforechange事件的触发函数handleChangePage(e,data)。页面跳转时pagebeforechange事件会被触发两次,第一次触发时data.toPage是到达页面的url,类型是string,第二次触发时data.toPage不是String类型 ,此时可以获取到达页面的信息。为了获得到达页面的信息,所以我们需要获得第二次触发时候的event,可以简单通过if(typeof data.toPage != “string”)来判断,这时候可以用e.target.baseURI来获取到达页面的URI,并通过这个URI来解析出附带的参数信息。然后通过e.target.find(“pageId”)来获取到达页的相应组件,并进行相应的操作。


相关方法


  1. function beforechange(e, data) {
  2.                 if (typeof data.toPage != "string") {
  3.                         var url = $.mobile.path.parseUrl(e.target.baseURI)
  4.                         var re = 'details.html';
  5.                         if (url.href.search(re) != -1) {
  6.                                 var page = $(e.target).find("#detailsPage");
  7.                                 var d = data.options.data;
  8.                                 var data = getUrlParam(url.href);
  9.                                 page.find("#nameDiv").html(decodeURIComponent(data[0]));
  10.                                 page.find("#timeDiv").html(decodeURIComponent(data[1]));
  11.                                 page.find("#contentDiv").html(decodeURIComponent(data[2]));
  12.                                
  13.                                
  14.                         }
  15.                 }
  16.         }
复制代码

解析URL参数的js方法:

  1.         function getUrlParam(string) {  
  2.                 var obj =  new Array();  
  3.                         if (string.indexOf("?") != -1) {  
  4.                                 var string = string.substr(string.indexOf("?") + 1);
  5.                                 var strs = string.split("&");  
  6.                                 for(var i = 0; i < strs.length; i ++) {  
  7.                                         var tempArr = strs[i].split("=");  
  8.                                         obj[i] = tempArr[1];
  9.                                 }  
  10.                         }  
  11.                         return obj;  
  12.         }


复制代码


it营
回复

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2014-2-20 21:45:26 | 显示全部楼层
正在学习中 谢谢楼主了 非常支持 开源
it营
回复 支持 反对

使用道具 举报

1

主题

91

帖子

89

积分

注册会员

Rank: 2

积分
89
发表于 2014-2-21 02:47:44 | 显示全部楼层
我是来刷分的,嘿嘿顺便学习一下
回复 支持 反对

使用道具 举报

0

主题

15

帖子

62

积分

注册会员

Rank: 2

积分
62
发表于 2014-2-21 11:15:32 | 显示全部楼层
我是来刷分的
回复 支持 反对

使用道具 举报

7

主题

27

帖子

110

积分

注册会员

Rank: 2

积分
110
发表于 2015-1-13 19:52:20 | 显示全部楼层
求楼主把demo发我QQ邮箱谢谢
qq:857647066@qq.com
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2015-1-16 08:50:40 | 显示全部楼层
从本地获取json的值作为参数传给另一个页面,怎么做做到。。我现在通过ajax,的方式能获取json,但是怎么把传给第二个页面?
回复 支持 反对

使用道具 举报

1

主题

3

帖子

13

积分

新手上路

Rank: 1

积分
13
发表于 2015-1-29 16:14:55 | 显示全部楼层
金生往事 发表于 2015-1-16 08:50
从本地获取json的值作为参数传给另一个页面,怎么做做到。。我现在通过ajax,的方式能获取json,但是怎么把 ...

你把json参数转成url参数,  到了你要跳转的页面, 就根据楼主的方法拿url参数就行了
回复 支持 反对

使用道具 举报

1

主题

2

帖子

19

积分

新手上路

Rank: 1

积分
19
发表于 2015-2-2 17:06:54 | 显示全部楼层
您好,想请教一个问题,
var page = $(e.target).find("#detailsPage");
上面这个函数中,如何通过参数来改变  #detailsPage 这个,也就是说  $(e.target).find("#detailsPage"); 中  #detailsPage 是可以通过参数改变的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 18:23 , Processed in 0.053835 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表