{HTML5}JQueryMobile页面跳转参数的传递解决方案
生活随笔
收集整理的這篇文章主要介紹了
{HTML5}JQueryMobile页面跳转参数的传递解决方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在JQueryMobile開發手機端應用使用可能需要考慮相關的頁面跳轉帶來的參數問題。因為JQueryMobile其實也是HTML5實踐的結果。HTML5中有localStorage和sessionStorage使用。最好采用Storage實現比較簡單易用。
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); }
//臨時存儲 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); } };
//綁定視圖的列表的相關的信息 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?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("服務請求失敗,請稍候再試...."); } }
例如在頁面A跳轉B頁面,在A跳轉前將跳轉參數注入到localStorage中,在B頁面初始化獲取localStorage相關的頁面參數。并做相應的處理同時在適當的頁面清理頁面參數。
storage.js內容如下:
Js代碼??舉例如下:
簡單封裝如下:
Js代碼??在A頁面的內容:
綁定所有workorderclass樣式的div
設置相關的頁面參數:
Java代碼??在頁面B的初始化方法中:
使用并適時清空頁面的storage、。
Js代碼??總結
以上是生活随笔為你收集整理的{HTML5}JQueryMobile页面跳转参数的传递解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jquery 获取Input 值
- 下一篇: AMD规范:简单而优雅的动态载入Java