使用jqMobi开发app基础之页面传值方式

PC版的web程序两个两个页面之间的传值方式主要有,cookie,查询字符串,还可以通过服务端的session来交换数据.但app的传值方式呢?

由于app基本都是单页面的方式,查询字符串这种方式似乎行不通了,至少目前个人还没有见到这种例子..

主要有1HTML5 LocalStorage 本地存储,2隐藏字段,3扩展属性,4服务器端的session等

1HTML5 LocalStorage 本地存储

这种传值方式类似于cookie传值方式,是HTML5的新标准。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,

前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。

参考

2隐藏字段

在PC版的web程序中经常使用隐藏字段来存储一些特定的信息,在app中也可以使用,当然有一定限制,在单页面的app中可以传值,因为是单页面,最终会在内存中变成同一个dom,所以可以在一个panel中,设定隐藏字段,在另一个panel中读取隐藏字段。

例如:

<div id="jiekuanshenpi" class="panel" data-load="loadFirstpage" data-defer="jiekuanshenpi.html"   data-tab="navbar_picture">
          </div>
           <div id="jiekuanshenpiDetail" class="panel" data-load="loadjiekuanshenpiDetail"  data-defer="jiekuanshenpiDetail.html" jiekuanshenpiDetailId=""  data-tab="navbar_picture">
          </div>

在jiekuanshenpi.html页面中设定隐藏字段的值,在jiekuanshenpiDetail.html中读取隐藏字段的值。

返回栏目页:http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

3扩展属性

使用的限制和原因与隐藏字段是一样的。

例如:

如上的代码,多加了一个扩展属性jiekuanshenpiDetailId

在jiekuanshenpi.html页面中设定扩展属性jiekuanshenpiDetailId的值,

$("#jiekuanshenpiDetail").attr("jiekuanshenpiDetailId",id);

在jiekuanshenpiDetail.html中读取jiekuanshenpiDetailId的值。

var jiekuanshenpiDetailId2 = $("#jiekuanshenpiDetail").attr("jiekuanshenpiDetailId");

4服务器端session等

这个和PC端的文本基本没有差别,服务端的传值方式基本都可以使用。

作者:csdn博客 xuexiaodong2009

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索存储
, 前后台传值
, jsp页面传值
, 传值
, 页面
, app html5 二维码
, aso.net传值
, 本地html
, 属性
, 页面传值
, id 成数组的传值
, html5传值
, 字段
, 本地
方式
mvc页面传值方式、html页面传值方式、jsp页面传值方式、asp.net页面传值方式、页面间传值的方式,以便于您获取更多的相关知识。

时间: 2024-12-01 09:25:24

使用jqMobi开发app基础之页面传值方式的相关文章

使用jqMobi开发app基础之Scrolling的使用,拖动后大量空白的解决

在使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据一文中,通过使用af.scroller.js解决了上拉刷新,下拉添加数据的功能,可是很奇怪,经过多次下拉后,发下底部的空白越来越多!! 基本的页面panel代码如下: <div id="jiekuanshenpi" title="借款审批" class="panel" data-load="loadFirstpage" data-tab

使用jqMobi开发app基础之panel之间的跳转方式总结

使用jqMobi开发app,panel之间的跳转方式.根据当前页面的不同展现方式,主要有四种跳转方式. 1当前页面是弹出的,关闭当前页面2当前页面不是弹出的,可以使用a标签3使用 $.ui.goBack()4任意panel的跳转 1当前页面是弹出的,关闭当前页面 例如登录页面因为使用了modal="true",因此是弹出的,再登陆成功后,只需要关闭弹出窗体就可以返回到以前的页面. $.ui.hideMask();关闭遮罩层 $.ui.hideModal(); 关闭弹出窗体 具体可以参考

使用jqMobi开发app基础之响应式布局介绍

在使用jqMobi开发app基础:Grid布局 中介绍了Grid布局,col2在大的屏幕上会显示为两列,col3会显示为3列,但如果屏幕小就会显示为一列,这就是响应式布局,也就是根据屏幕大小,动态改变css样式的一种布局.这种布局的关键字是@media 在af.ui.css文件中搜索media找到如下css样式: #afui .col2, #afui .col3, #afui .col1-3, #afui .col2-3 { float: none; width: 100%; } #afui .

使用jqMobi开发app基础之注销页面的实现

注销其实可以使用一个基本的a标签. 例如我把登录和注销放在了底部导航条navbar中. 基本代码: <div id="navbar" > <a href="#home" id='navbar_home' class='icon home' >首页</a> <a href="#login" id='loginlink' class='icon home'>登陆</a> <a id='

使用jqMobi开发app基础之使用 jQuery

如何在使用jqMobi开发app中使用jquery呢?由于jqMobi本身和jquery中的很多方法都是一样的,直接添加,肯定会冲突? 但由于jqMobi的插件很少,有时又不得不使用jquery,如何处理? 官网已有方法:添加jq.appframework.js,这个是把appframework.js变成了jquery的插件,自然就不会有冲突了. 下载地址 需要注意添加顺序 <script src="jquery.js"></script> <script

使用jqMobi开发app基础之真的只能存在一个DOM吗

研究jqMobi的demo,发现这个例子,所有的东西全在一个页面中,于是便认为使用jqMobi开发app,所有的内容都在一个HTML dom?难道真的不能分开吗? 不能像传统的网页开发那样,按照功能分成不同的HTML dom吗?由于资料很少,只有官方的demo可以参考,于是自己在思索这个问题.想不到最终却在jqeury mobile开发中找打了答案!! jqMobi中的panel对应与jqeury mobile中的data-role="page",jqeury mobile为什么可以把

使用jqMobi开发app基础之下拉select

jqMobi有一个专门处理select的插件af.selectBox.js,感觉很简单很简单,官方文档只是简单demo,没有详细说明. 简单的列子: <select id="test" style="-webkit-appearance: listbox;"> <option value="1">One</option> <option value="2">Two</opt

使用jqMobi开发app基础之panel之间的跳转方式

PC端的web程序有很多种跳转方式,但使用jqMobi开发app页面之间如何跳转呢? 还可以使用传统的a标签吗? 分析jqMobi的demo,发现所有的页面都写在一个页面中,似乎也只能在这一个页面中跳转? 使用panel属性data-defer把页面分开后,如何跳转呢? 例如:一个列表页面list.html,单击某一条就跳转到详细信息页面.如何实现呢? <div id="list" class="panel" data-load="loadFirst

使用jqMobi开发app基础之Grid布局

jqMobi中的 Grid布局,是一种表格式布局,主要是两列,三列布局. 主要通过类属性grid表示是表格布局,通过类属性col2表示分成两列的表格.col3表示分成3列的表格..col2-3表示在三列中占居两列的位置. 例如: <div class="grid"> <div class="col2"> <a href="#home" id='navbar_home' class='icon home' >两列