JQuery Mobile 页面参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。

1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。

2、通过HTML5的Web Storage进行参数传递。

3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来。(程序灵活性较弱)

一、以GET方式实现页面间参数传递

view sourceprint?

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>练习</title>

05.<meta charset="utf-8" />

06.<meta name="viewport" content="width=device-width,

07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

08.<link href="css/jquery.mobile-1.0.1.min.css"

09.rel="stylesheet" type="text/css"/>

10.<script src="js/jquery-1.6.4.js"

11.type="text/javascript" ></script>

12.<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

13.<script type="text/javascript">

14.function getParameterByName(name){

15.var match = RegExp(‘[?&]‘ + name + ‘=([^&]*)‘).exec(window.location.search);

16.return match && decodeURIComponent(match[1].replace(/+/g, ‘ ‘));

17.}

18.$(‘#page_Parameter1‘).live(‘pageshow‘,  function(event, ui){

19.alert("第二个页面的参数:" + getParameterByName(‘parameter‘));

20.});

21.</script>

22.</head>

23.<body>

24.<section id="page_Parameter0" data-role="page">

25.<header data-role="header">

26.<h3>页面参数传值</h3>

27.</header>

28.<div class="content" data-role="content">

29.<p>传递参数进入下一页,以Alert方式显示参数内容。<br/>

30.传递参数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>

31.</p>

32.</div>

33.</section>

34.<section id="page_Parameter1" data-role="page">

35.<header data-role="header">

36.<h3>页面参数传递</h3>

37.</header>

38.<div class="content" data-role="content">

39.<p>通过Alert显示前一个界面参数。<br/>

40.<a href="#page_Parameter0">返回</a></p>

41.</div>

42.</section>

43.</body>

44.</html>

注意:要注明访问的页面形式为外部链接形式rel="external",否则页面间参数传递无法正常执行。

二、通过HTML5 Web Storage特性实现参数传递

通常包含两部分,sessionStorage是将存储内容以会话的形式存储在浏览器中,由于是会话级别的存储,当浏览器关闭之后,sessionStorage中的内容会全部消失。localStorage是基于持久化的存储,类似于传统HTML开发中cookie的使用,除非主动删除localStorage中的内容,否则将不会删除。

检查浏览器支持Web Storage特性:

view sourceprint?

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>练习</title>

05.<meta charset="utf-8" />

06.<meta name="viewport" content="width=device-width,

07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

08.<link href="css/jquery.mobile-1.0.1.min.css"

09.rel="stylesheet" type="text/css"/>

10.<script src="js/jquery-1.6.4.js"

11.type="text/javascript" ></script>

12.<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

13.</head>

14.<body>

15.<script type="text/javascript">

16.if(window.localStorage){

17.alert("浏览器支持localStorage");

18.}else{

19.alert("浏览器暂不支持localStorage");

20.}

21.

22.if(window.sessionStorage){

23.alert("浏览器支持sessionStorage");

24.}else{

25.alert("浏览器暂不支持sessionStorage")

26.}

27.</script>

28.</body>

29.</html>

通常,在jQuery Mobile中实现页面间参数传递时,我们不使用localStorage而是使用sessionStorage,因为不必持久化在本地。

view sourceprint?

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>练习</title>

05.<meta charset="utf-8" />

06.<meta name="viewport" content="width=device-width,

07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

08.<link href="css/jquery.mobile-1.0.1.min.css"

09.rel="stylesheet" type="text/css"/>

10.<script src="js/jquery-1.6.4.js"

11.type="text/javascript" ></script>

12.<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

13.<script type="text/javascript">

14.$(‘#page_Parameter1‘).live(‘pageshow‘, function(event, ui){

15.alert("第二个界面的参数:" + sessionStorage.id);

16.});

17.</script>

18.</head>

19.<body>

20.<section id="page_Parameter0" data-role="page">

21.<header data-role="header">

22.<h3>页面参数传递</h3>

23.</header>

24.<div class="content" data-role="content">

25.<p>传递参数进入下一页,以Alert方式显示参数内容。<br/>

26.传递参数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>

27.</p>

28.</div>

29.</section>

30.<section id="page_Parameter1" data-role="page">

31.<header data-role="header">

32.<h3>页面参数传递</h3>

33.</header>

34.<div class="content" data-role="content">

35.<p>通过Alert显示来自前一个界面的参数。<br/>

36.<a href="#page_Parameter0">返回</a>

37.</p>

38.</div>

39.</section>

40.</body>

41.</html>

时间: 2024-10-13 18:23:15

JQuery Mobile 页面参数传递的相关文章

JQuery Mobile 页面参数传递(转)

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 01.<!DOCTYPE h

用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器

在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,Tomcat 服务器(直接去官网下载 zip 版本就OK,然后\bin文件夹下,可以找到startup.bat文件) 配置: 在环境变量中,添加 变量名:CATALINA_HOME 变量值:刚刚安装的路径(或者解压后的路径......apache-tomcat-8.0.28\)就ok了: 配置好后,然后

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的   二.Adobe Dreamweaver CS6 环境搭建以及软件破解   软件安装步骤:   http://www.phonegap100.com/article-79-1.html            软件下载链接地址:   http://bbs.phonegap100.co

jQuery Mobile 页面事件

jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 Page Load/Unload - 当外部页面加载时.卸载时或遭遇失败时 Page Transition - 在页面过渡之前和之后 Page Change - 当页面被更改,或遭遇失败时 jQuery Mobile Initialization 事件 当 jQuery Mobile 中的一张典型页面

(01)创建第一个jQuery Mobile页面

jQuery Mobile 是一个适配pc端和移动端的前台开放框架,当然很多时候主要用于移动端的开发.怎样搭建一个jQuery Mobile的开发环境呢?其实很简单,我们只需要引入的css.js和images等资源文件即可. 引入这些资源文件有两个方法: 1.从 CDN 中引入 jQuery Mobile 这个方法比较简单,你只需要引入css和js文件即可,不需要引入images文件,它们都已经存放在cdn服务器上了,当然这样不好的地方就是你不可以修改图片或者是js和css文件了. <!--jQ

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

关于jquery mobile 页面闪烁与抖动问题

1.闪烁:在用a链接跳转到另一个页面的时候,页面总会抖动几下,其实就是页面切换时的transition特效,jqm貌似默认了这项. 解决方案:在a链接添加transition:none; 属性就可以啦. 2.抖动:同样的,也是在a链接跳转时出现的一种情况,原因即是jqm的a链接默认是用ajax进行跳转了,造成了css变形问题,需要刷新才能解决. 解决方案:在a链接添加rel="external"; 属性就可以啦. 关于jquery mobile 页面闪烁与抖动问题

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学习中出一系列的博客吧.我喜欢的一句话 "Talk is Cheap Show me the CODE",所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看