JQueryMobile页面跳转参数的传递解决方案

浏览数：26 / 时间：2015年06月09日

          在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题。因为JQueryMobile其实也是HTML5实践的结果。HTML5中有localStorage和sessionStorage使用。最好采用Storage实现比较简单易用。

例如在页面A跳转B页面，在A跳转前将跳转参数注入到localStorage中，在B页面初始化获取localStorage相关的页面参数。并做相应的处理同时在适当的页面清理页面参数。

storage.js内容如下：

Js代码  
  1. function kset(key, value){  
  2.     console.log("key"+key+"value"+value);  
  3.     window.localStorage.setItem(key, value);  
  4. }  
  5.   
  6. function kget(key){  
  7.     console.log(key);  
  8.     return window.localStorage.getItem(key);  
  9. }  
  10.   
  11. function kremove(key){  
  12.     window.localStorage.removeItem(key);  
  13. }  
  14.   
  15. function kclear(){  
  16.     window.localStorage.clear();  
  17. }  
  18. //测试更新方法  
  19. function kupdate(key,value){  
  20.     window.localStorage.removeItem(key);  
  21.     window.localStorage.setItem(key, value);  
  22. }  

 

举例如下：

简单封装如下：

Js代码  
  1. //临时存储  
  2. var TempCache = {  
  3.     cache:function(value){  
  4.         localStorage.setItem("EasyWayTempCache",value);  
  5.     },  
  6.     getCache:function(){  
  7.         return  localStorage.getItem("EasyWayTempCache");  
  8.     },  
  9.     setItem:function(key,value){  
  10.         localStorage.setItem(key,value);  
  11.     },  
  12.     getItem:function(key){  
  13.         return localStorage.getItem(key);  
  14.     },  
  15.     removeItem:function(key){  
  16.         return localStorage.removeItem(key);  
  17.     }  
  18. };  

 

 在A页面的内容：

  绑定所有workorderclass样式的div

  设置相关的页面参数：

Java代码  
  1. //绑定视图的列表的相关的信息  
  2. function bindListView(changeData){  
  3.     $(".workorderclass").each(function(){  
  4.             $(this).click(function(){  
  5.                 //绑定订单的编号，便于在下一个页面切换时候使用  
  6.                 TempCache.setItem("order_function_mgr_id",$(this).attr("id"));  
  7.                   
  8.                 TempCache.setItem("order_function","serviceOrderFunction");  
  9.                 TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));  
  10.             });  
  11.              
  12.     });  
  13. }  

 

在页面B的初始化方法中：

  使用并适时清空页面的storage、。

Js代码  
  1.     //工单展示的初始化信息  
  2.     function displayWorkOrder(){  
  3.          //绑定订单的编号，便于在下一个页面切换时候使用  
  4.          var workOrderId=TempCache.getItem("order_function_mgr_id");  
  5.          workOrderId=workOrderId.replace(/(^\s*)|(\s*$)/g,"");  
  6.          //追踪工单来源  
  7.           functionName=TempCache.getItem("order_function");  
  8.           functionName=functionName.replace(/(^\s*)|(\s*$)/g,"");  
  9.             
  10.          if(workOrderId!=‘‘){  
  11.             queryWorkOrderInfo(workOrderId,functionName);  
  12. TempCache.removeItem("order_function_mgr_id");       }else{  
  13.             alert("服务请求失败，请稍候再试....");  
  14.          }  
  15.     }  

 

如有不懂的地方，欢迎沟通谢谢！

JQueryMobile页面跳转参数的传递解决方案,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java html src sp class 代码 java html src sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢