HTML5 JQueryMobile页面跳转参数的传递解决方案
来源:互联网 发布:js 替换某个标签 编辑:程序博客网 时间:2024/05/29 12:30
转自:http://blog.csdn.net/wangran51/article/details/10055335
在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题。因为JQueryMobile其实也是HTML5实践的结果。HTML5中有localStorage和sessionStorage使用。最好采用Storage实现比较简单易用。
例如在页面A跳转B页面,在A跳转前将跳转参数注入到localStorage中,在B页面初始化获取localStorage相关的页面参数。并做相应的处理同时在适当的页面清理页面参数。
storage.js内容如下:
Js代码
- function kset(key, value){
- console.log("key"+key+"value"+value);
- window.localStorage.setItem(key, value);
- }
- function kget(key){
- console.log(key);
- return window.localStorage.getItem(key);
- }
- function kremove(key){
- window.localStorage.removeItem(key);
- }
- function kclear(){
- window.localStorage.clear();
- }
- //测试更新方法
- function kupdate(key,value){
- window.localStorage.removeItem(key);
- window.localStorage.setItem(key, value);
- }
举例如下:
简单封装如下:
Js代码
- //临时存储
- var TempCache = {
- cache:function(value){
- localStorage.setItem("EasyWayTempCache",value);
- },
- getCache:function(){
- return localStorage.getItem("EasyWayTempCache");
- },
- setItem:function(key,value){
- localStorage.setItem(key,value);
- },
- getItem:function(key){
- return localStorage.getItem(key);
- },
- removeItem:function(key){
- return localStorage.removeItem(key);
- }
- };
在A页面的内容:
绑定所有workorderclass样式的div
设置相关的页面参数:
Java代码
- //绑定视图的列表的相关的信息
- function bindListView(changeData){
- $(".workorderclass").each(function(){
- $(this).click(function(){
- //绑定订单的编号,便于在下一个页面切换时候使用
- TempCache.setItem("order_function_mgr_id",$(this).attr("id"));
- TempCache.setItem("order_function","serviceOrderFunction");
- TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));
- });
- });
- }
在页面B的初始化方法中:
使用并适时清空页面的storage、。
Js代码
- //工单展示的初始化信息
- function displayWorkOrder(){
- //绑定订单的编号,便于在下一个页面切换时候使用
- var workOrderId=TempCache.getItem("order_function_mgr_id");
- workOrderId=workOrderId.replace(/(^\s*)|(\s*$)/g,"");
- //追踪工单来源
- functionName=TempCache.getItem("order_function");
- functionName=functionName.replace(/(^\s*)|(\s*$)/g,"");
- if(workOrderId!=''){
- queryWorkOrderInfo(workOrderId,functionName);
- TempCache.removeItem("order_function_mgr_id"); }else{
- alert("服务请求失败,请稍候再试....");
- }
- }
0 0
- {HTML5}JQueryMobile页面跳转参数的传递解决方案
- HTML5 JQueryMobile页面跳转参数的传递解决方案
- {HTML5}JQueryMobile页面跳转参数的传递解决方案
- JQueryMobile页面跳转参数的传递解决方案
- JQueryMobile页面跳转参数的传递解决方案
- JQueryMobile页面跳转参数的传递解决方案
- JQueryMobile页面跳转参数的传递解决方案
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- jquerymobile页面跳转和参数传递
- HTML5移动开发之路 jQueryMobile页面间参数传递
- HTML5移动开发之路 jQueryMobile页面间参数传递
- HTML5 页面跳转和参数传递
- phonegap+jquerymobile:页面跳转出现白屏的解决方案
- phonegap+jquerymobile:页面跳转出现白屏的解决方案
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
- zoj -1586 QS Network
- Oracle over函数
- 时间转换
- RTSP客户端 实例
- Android自定义手势与手势匹配
- HTML5 JQueryMobile页面跳转参数的传递解决方案
- ubuntu下安装程序的三种方法
- AP与交换机结合无缝覆盖
- Python核心编程--执行环境
- jmeter中文文档之导读
- mysql的varchar(N)和int(N)的含义及其与char区别
- Java利用反射实现对象之间相同属性复制
- [WC 2015复习](三)图论算法与经典模型
- ActionBar中的下拉菜单操作