【App FrameWork】页面之间的参数传递
若应用中有多个页面，这时2个页面之间可能需要进行参数传递。那么如何来实现呢？
首先想到的就是URL参数传递的方式，如：在panel里设置属性 data-defer="Pages/Shake.html?uid=nxgliming"，然后在第二个页面接收，结果方向第二个页面的URL为
，根本获取不到参数。原因是：在index.html页面加载的时候，它同时也会把第二个页面(Shake.html)的内容加载到当前的DOM里面，所以得到的URL还是index.html。
或者采用ajax将参数POST到第二个页面，这种方式没有试过，是否可行？
之后想到了HTML5里面localStorage变量。localStorage是用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
localStorage的更多信息参考：http://www.mhtml5.com/2012/05/4982.html
index.html
<body>
<div id="afui">
<!--header头部属于导航栏固定于整个应用的顶部-->
<div id="header">
</div>
<!--content内容区则用于承载应用的不同页面-->
<div id="content">
<div title='AppFrameWork' id="main" class="panel" selected="true">
第一个HTML页面
</div>
</div>
<!--footer底部区则属于标签栏固定于整个应用的底部，用户可以通过点击不同的标签到达不同的页面。-->
<div id="navbar">
<a href="#main" id='navbar_home' class='icon home pressed'>home</a>
<a onclick="javascript:loadpageShake()" id='navbar_shake' class='icon location'>Shake</a>
</div>
</div>
</body>
实现方式：
在index.html，在底部标签栏的<a>标签上使用onclick，使用App FrameWork里的$.ui.loadContent()方法加载Shake.html，同时将参数写入localStorage变量。
$.ui.loadContent(target,newTab,goBack,transition) //发起转场或通过ajax加载一个class为panel的div，也可以是URL。
function loadpageShake() {
localStorage.setItem("uid", "nxgliming"); //
$.ui.loadContent("Pages/Shake.html", false, false, "");
}
然后在Shake.html上取出参数值：
$("#span1").html("接收页面的传值：uid=" + localStorage.getItem("uid"));
//设置页面导航栏的标题
$.ui.setTitle("第二个页面");
结果如下：
【App FrameWork】页面之间的参数传递的更多相关文章
- 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...
- MUI APP关于页面之间的传值，plusready和自定义事件
最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了.这个经过MUI官方确认,是 ...
- 四 SpringMVC与页面之间的参数传递&高级参数的绑定&日期类型的转换
参数传递: 1 原生方式:使用Servlet API , request.getParameter("id"); 2 直接将请求参数作为Controller中的形参: publ ...
- APPCAN开发笔记：html页面之间的参数传递：使用js获取url中的参数，以及在APPCAN中不能使用的解决方法
用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...
- HTML页面之间的参数传递
HTML 与 HTML 的跳转中如何在HTML之中实现参数的传递?主要代码如下:request为方法名称,params 为要获取的参数. function request(params) { var ...
- 【App FrameWork】框架的页面布局
之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...
- Windows Phone 页面之间参数传递方法
目前对WP7开发正在研究,对页面之间参数传递进行了一个小总结,有不正确的地方,欢迎大家指正.. WP7编程采用的技术是Silverlight,页面之间参数传递的方式主要有 通过NavigationCo ...
- js jquery 实现html页面之间参数传递（单一参数、对象参数传递）
最近自己在忙着做毕业设计,后台程序员,前端菜鸡,因为需要,所以实现了html页面之间参数传递.------jstarseven .菜鸡的自我修养. 页面A代码如下: <!DOCTYPE html ...
随机推荐
- （转载）总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法
总结一下SQL语句中引号(').quotedstr().('').format()在SQL语句中的用法 总结一下SQL语句中引号(').quotedstr().('').format()在SQL语句中 ...
- cwm-recovery自动生成工具
android发展迅速,刷机已经成了一种习惯,cwm-recovery是必不可少的工具,下面我把自己用的自动生成cwm-recovery的工具发布出来,供友友们交流和学习,欢迎拍砖 已经公开发布在gi ...
- List<t>中如何将指定元素的值放到第一位
public static List<GCountryExtend> GetList() { try { var result = new List<GCountryExtend&g ...
- Django Admin后台使用tinymc 富文本编辑器
1.CDN地址 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 2.修改base.ht ...
- poj 3518 Corporate Identity 后缀数组->多字符串最长相同连续子串
题目链接 题意:输入N(2 <= N <= 4000)个长度不超过200的字符串,输出字典序最小的最长公共连续子串; 思路:将所有的字符串中间加上分隔符,注:分隔符只需要和输入的字符不同, ...
- spot 5、ALOS监督分类波段组成
spot 5监督分类RGB：412 ALOS分类波段RGB：432
- HDFS导论（转）
1.流式数据访问 HDFS的构建思想是这样的:一次写入,多次读取是最高效的访问模式.数据集通常有数据源生成或从数据源复制而来,接着长时间在此数据集上进行各类分析.每次分析都将设计数据集的大部分数据甚至 ...
- 演示demo开发问题及解决方案集锦
模型处理问题: 1. 3Dmax模型导入Unity单位设置: 自定义->单位设置->系统单位设置与显示单位比例都调成厘米 2. 3Dmax中材质贴图: 点击材质编辑器[在模式下可以选择精简 ...
- hdu 4710 Balls Rearrangement（）
http://acm.hdu.edu.cn/showproblem.php?pid=4710 [code]: #include <iostream> #include <cstdio ...
- Object-C单元测试&MOCK（摘录精选）
断言测试类型: 下面一共18个断言(SDK中也是18个,其含义转自ios UnitTest 学习笔记,真心佩服原文的博主): XCTFail(format…) 生成一个失败的测试: XCTAssert ...