标签:ons 检查 dev 代码 highlight 程序 tle fonts csdn
本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。
1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。
2、通过HTML5的Web Storage进行参数传递。
3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来。(程序灵活性较弱)
一、以GET方式实现页面间参数传递
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href="css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src="js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
- <script type="text/javascript">
- function getParameterByName(name){
- var match = RegExp(‘[?&]‘ + name + ‘=([^&]*)‘).exec(window.location.search);
- return match && decodeURIComponent(match[1].replace(/\+/g, ‘ ‘));
- }
- $(‘#page_Parameter1‘).live(‘pageshow‘, function(event, ui){
- alert("第二个页面的参数:" + getParameterByName(‘parameter‘));
- });
- </script>
- </head>
- <body>
- <section id="page_Parameter0" data-role="page">
- <header data-role="header">
- <h1>页面参数传值</h1>
- </header>
- <div class="content" data-role="content">
- <p>传递参数进入下一页,以Alert方式显示参数内容。<br/>
- 传递参数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>
- </p>
- </div>
- </section>
- <section id="page_Parameter1" data-role="page">
- <header data-role="header">
- <h1>页面参数传递</h1>
- </header>
- <div class="content" data-role="content">
- <p>通过Alert显示前一个界面参数。<br/>
- <a href="#page_Parameter0">返回</a></p>
- </div>
- </section>
- </body>
- </html>
注意:要注明访问的页面形式为外部链接形式rel="external",否则页面间参数传递无法正常执行。
二、通过Html5 Web Storage特性实现参数传递
通常包含两部分,sessionStorage是将存储内容以会话的形式存储在浏览器中,由于是会话级别的存储,当浏览器关闭之后,sessionStorage中的内容会全部消失。localStorage是基于持久化的存储,类似于传统HTML开发中cookie的使用,除非主动删除localStorage中的内容,否则将不会删除。
检查浏览器支持Web Storage特性:
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href="css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src="js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
- </head>
- <body>
- <script type="text/javascript">
- if(window.localStorage){
- alert("浏览器支持localStorage");
- }else{
- alert("浏览器暂不支持localStorage");
- }
-
- if(window.sessionStorage){
- alert("浏览器支持sessionStorage");
- }else{
- alert("浏览器暂不支持sessionStorage")
- }
- </script>
- </body>
- </html>
通常,在jQuery Mobile中实现页面间参数传递时,我们不使用localStorage而是使用sessionStorage,因为不必持久化在本地。
- <!DOCTYPE html>
- <html>
- <head>
- <title>练习</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
- <link href="css/jquery.mobile-1.0.1.min.css"
- rel="stylesheet" type="text/css"/>
- <script src="js/jquery-1.6.4.js"
- type="text/javascript" ></script>
- <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
- <script type="text/javascript">
- $(‘#page_Parameter1‘).live(‘pageshow‘, function(event, ui){
- alert("第二个界面的参数:" + sessionStorage.id);
- });
- </script>
- </head>
- <body>
- <section id="page_Parameter0" data-role="page">
- <header data-role="header">
- <h1>页面参数传递</h1>
- </header>
- <div class="content" data-role="content">
- <p>传递参数进入下一页,以Alert方式显示参数内容。<br/>
- 传递参数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>
- </p>
- </div>
- </section>
- <section id="page_Parameter1" data-role="page">
- <header data-role="header">
- <h1>页面参数传递</h1>
- </header>
- <div class="content" data-role="content">
- <p>通过Alert显示来自前一个界面的参数。<br/>
- <a href="#page_Parameter0">返回</a>
- </p>
- </div>
- </section>
- </body>
- </html>
HTML5移动开发之路(53)——jQueryMobile页面间参数传递
标签:ons 检查 dev 代码 highlight 程序 tle fonts csdn
原文地址:http://www.cnblogs.com/itxdl/p/6089844.html