在使用頁腳進行導航時管理多個頁面

在我的JQM應用程序中，我使用了固定頁腳來瀏覽不同模塊（如主頁，用戶，項目等）之間的導航。這是我的實際代碼的修剪版本。在使用頁腳進行導航時管理多個頁面

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script> 
      function addUser(){ 
      console.log("sss"); 
       $.mobile.changePage("#add_user"); 
      } 
      function editUser(){ 
       $.mobile.changePage("#edit_user"); 
      } 
      function delUser(){ 
       $.mobile.changePage("#del_user"); 
      } 

     </script> 
     <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="content"> 
       This is Home 
      </div> 
      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li> 
         <li><a href="#users">Users</a></li> 

        </ul> 
       </div> 
      </div> 
     </div> 
     <div data-role="page" id="users"> 
      <div data-role="content"> 
       This is Users 
      </div> 
      <input type="button" value="Add a user" onclick="addUser()"/> 
      <input type="button" value="Edit user" onclick="editUser()"/> 
      <input type="button" value="Delete user" onclick="delUser()"/> 
      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li> 

        </ul> 
       </div> 
      </div> 
     </div> 


     <div data-role="page" id="add_user"> 
      <div data-role="content"> 
       Here users can be added 
       <a href="#users" data-role="button">Back to Users</a> 
      </div> 
      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li> 

        </ul> 
       </div> 
      </div> 
     </div> 

     <div data-role="page" id="edit_user"> 
      <div data-role="content"> 
       Here user details can be edited 
      </div> 
      <a href="#users" data-role="button">Back to Users</a> 
      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li> 

        </ul> 
       </div> 
      </div> 
     </div> 

     <div data-role="page" id="del_user"> 
      <div data-role="content"> 
       Here user can be deleted 
      </div> 
      <a href="#users" data-role="button">Back to Users</a> 
      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#users" class="ui-btn-active ui-state-persist">Users</a></li> 

        </ul> 
       </div> 
      </div> 
     </div> 

      </body> 

      </html>

現場演示在這裏 - http://jsfiddle.net/n4MZz/

考慮這種使用情況：

1）點擊用戶選項卡 - 用戶選項卡將裝載有添加/編輯鍵/刪除

2 ）點擊添加用戶按鈕 - 頁面添加用戶將加載選中的用戶選項卡。

3）單擊主頁選項卡。

4）單擊用戶選項卡。

現在它會轉到用戶主頁上添加/編輯/刪除選項。我不希望它那樣。我想要頁面與我已經執行的最後一個動作。在上面的用例中，我想頁面添加用戶，當我執行步驟4時加載。

任何想法如何實現這一點？在此先感謝。

來源

2011-10-22 user700284

創建一個pagebeforeshow事件。請參閱下面的代碼+評論。

小提琴：http://jsfiddle.net/n4MZz/2/

var lastMode = "users"; 
var lastPageUsers = false; 
$("div").live("pagebeforeshow", function(){ //Attach event 
    var id = this.id; //Get ID of the requested page 
    if(id == "users"){ 

     //If lastMode is not users and if the last page is not a user page 
     if(lastMode != "users" && !lastPageUsers){ 
      lastPageUsers = true; 
      $.mobile.changePage('#'+lastMode); 
     } 

    } else if(id == "add_user" || id == "edit_user" || id == "del_user"){ 
     lastMode = id; 
    } else { //Not a user page, so set lastPageUsers = false 
     lastPageUsers = false; 
    } 
});

來源

2011-10-22 15:21:32

感謝answer.I檢查code.It就像是用戶的標籤來第一次顯示，然後它到最後mode.Also我不再能通過「返回用戶」按鈕進入主用戶頁面 – user700284

@ user700284更新了答案。現在已經修復了。 –

在使用頁腳進行導航時管理多個頁面

回答

相關問題