jquerymobile跳转方法_JQueryMobile页面跳转参数的传递解决方案

在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);

}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);

}

};//临时存储 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"));

});

});

}//绑定视图的列表的相关的信息 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("服务请求失败，请稍候再试....");

}

}

http://blog.sina.com.cn/s/blog_406d624f01016pjd.html