若应用中有多个页面，这时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】页面之间的参数传递的更多相关文章

  1. 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递

    基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...

  2. MUI APP关于页面之间的传值，plusready和自定义事件

    最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了.这个经过MUI官方确认,是 ...

  3. 四 SpringMVC与页面之间的参数传递&高级参数的绑定&日期类型的转换

    参数传递: 1 原生方式:使用Servlet  API  , request.getParameter("id"); 2 直接将请求参数作为Controller中的形参: publ ...

  4. APPCAN开发笔记：html页面之间的参数传递：使用js获取url中的参数，以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  5. HTML页面之间的参数传递

    HTML 与 HTML 的跳转中如何在HTML之中实现参数的传递?主要代码如下:request为方法名称,params 为要获取的参数. function request(params) { var ...

  6. 【App FrameWork】框架的页面布局

    之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...

  7. 微信小程序详解——页面之间的跳转方式【路由】和参数传递

    微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...

  8. Windows Phone 页面之间参数传递方法

    目前对WP7开发正在研究,对页面之间参数传递进行了一个小总结,有不正确的地方,欢迎大家指正.. WP7编程采用的技术是Silverlight,页面之间参数传递的方式主要有 通过NavigationCo ...

  9. js jquery 实现html页面之间参数传递（单一参数、对象参数传递）

    最近自己在忙着做毕业设计,后台程序员,前端菜鸡,因为需要,所以实现了html页面之间参数传递.------jstarseven .菜鸡的自我修养. 页面A代码如下: <!DOCTYPE html ...

随机推荐

  1. Demo学习： ClientInfo

    ClientInfo 获取客户端环境参数,从0.9版本开始新增了TUniClientInfoRec对象,可以得到客户端的一些信息,之前为了获取浏览器版本号需要自己写函数,现在可以直接使用TUniCli ...

  2. C++程序员笔试复习概要（一）

    第8章     类和对象的创建 [内容提要] 类和对象 构造函数和析构函数 对象数组与对象指针 静态成员 友元 静态函数 虚函数 [重点与难点] 8.1 类和对象 8.1.1 类的定义 类实质上是用户 ...

  3. Linux网络通信编程（套接字模型TCP\UDP与IO多路复用模型select\poll\epoll）

    Linux下测试代码: http://www.linuxhowtos.org/C_C++/socket.htm TCP模型 //TCPClient.c #include<string.h> ...

  4. 使用OpenXml操作Excel，以下方法用于在添加列时修改Cell的CellReference属性。

    以下方法实现了递增Excel中单元格的CellReference的功能,只支持两位字母. public static string CellReferenceIncrement(string cell ...

  5. [Learn Android Studio 汉化教程]第三章：使用 Android Studio 编程

    [Learn Android Studio 汉化教程]第三章:使用 Android Studio 编程 本章包含如何在 Android Studio 中书写或生成代码. Android Studio ...

  6. c#对字符串的各种操作

    1.字符串定义 2.在字符串后面追加字符串 3.获取字符串长度 4.截取字符串的一部分 5.字符串转为比特码 6.查指定位置是否为空字符 7.查字符串是否是标点符号 8.截头去尾(Trim) 9.替换 ...

  7. xcode7 app loader error itms 90168

    . $ cd ~/.itmstransporter   . $ rm update_check*   . $ mv softwaresupport softwaresupport.bak   . $  ...

  8. vs中的主题配置

    比较讨厌vs的默认字体颜色及背景,代码看久了就受不了.不过自己手动配置的话还是比较麻烦的,这里有一个网站(http://studiostyl.es/)提供了很多主题,一般都是背景比较深色的,对眼睛比较 ...

  9. [转载]MongoDB设置访问权限、设置用户

    MongoDB已经使用很长一段时间了,基于MongoDB的数据存储也一直没有使用到权限访问(MongoDB默认设置为无权限访问限制),今天特地花了一点时间研究了一下,研究成果如下: 注:研究成果基于W ...

  10. fiddler插件开发step by step 1

    Fiddler 是优秀的抓包工具,有着众多的优秀插件.Fiddler 软件是由C#语言开发的,运行在.net Framework 框架之上,所以我们也可以使用vs来开发自己的Fiddler插件,下面就 ...