jQuery Mobile：如何模擬jQuery Mobile上的iOS滑出導航模式？

Question

編輯2/13：現在存在jQuery Mobile 1.3中的Panels widget！請使用此代替。

我正在嘗試編寫custom CSS-based transition in jQuery Mobile來模擬slide-out navigation design pattern。

我想要完成的是將導航滑入視圖並佔用視口空間的75％。剩下的25％填滿了上一頁的剩餘部分。

這裏是我的CSS：

.slidenav.in { /*New page coming in*/ 
    -webkit-transform: translateX(-75%); 
    -webkit-animation-name: slidenav-in; 
} 

@-webkit-keyframes slidenav-in { 
    from { -webkit-transform: translateX(-75%); } 
    to { -webkit-transform: translateX(0); } 
} 

.slidenav.out { /*Old page going out*/ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slidenav-content-out; 
} 

@-webkit-keyframes slidenav-content-out { 
    from { -webkit-transform: translateX(0); } 
    to { -webkit-transform: translateX(75%); } 
} 

.slidenav.in.reverse { /*Old page coming in*/ 
    -webkit-transform: translateX(75%); 
    -webkit-animation-name: slidenav-content-in; 
} 

@-webkit-keyframes slidenav-content-in { 
    from { -webkit-transform: translateX(75%); } 
    to { -webkit-transform: translateX(0); } 
} 

.slidenav.out.reverse { /*New page going out*/ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slidenav-out; 
} 

@-webkit-keyframes slidenav-out { 
    from { -webkit-transform: translateX(0); } 
    to { -webkit-transform: translateX(-75%); } 
} 

我似乎無法得到它做我想做的，但。它完全刪除舊頁面，而不是將其餘25％的頁面留在視圖中。

你可以看到這裏發生了什麼（WebKit瀏覽器）：http://jsbin.com/ukajeb/7

我在做什麼錯？

Answer 1

編輯2/13：在jQuery Mobile 1.3中的Panels widget現在存在！請使用此代替。

所以我的工作多一些就這個問題和與螢火蟲的幫助下，發現關鍵幀動畫正在發生後，原有的網頁被複位到原來的位置和display設置爲none。

瞭解了這一點，我開始詳細瀏覽jQuery Mobile文檔，發現有Page Transition Events可以綁定到。更具體地說，是pageshow和pagehide事件。

然後我手動設置的原始頁面的CSS：

$('[data-role=page]').live('pagehide',function(event, ui){ 
    $(this).css({ 
     "display": "block", 
     "-webkit-transform": "translateX(75%)" 
    }); 
}); 
$('[data-role=page]').live('pageshow',function(event, ui){ 
    $(this).css({ 
     "display": "", 
     "-webkit-transform": "" 
    }); 
}); 

看看這裏（WebKit瀏覽器）：http://jsbin.com/ukajeb/3

希望別人發現這個有用的！

注意：此演示使用jQuery Mobile 1.0.1，它只支持jQuery 1.6.4。這就是爲什麼使用.live()而不是.on()。然而，即將推出的jQuery Mobile 1.1.0將支持jQuery 1.7.1，因此應該使用.on()來代替已棄用的.live()。

Answer 2

我不知道這是否會完全幫助，但我看了一下這個螢火蟲裏面。我認爲正在發生的事情是，當您完成轉換（甚至是部分轉換）時，活動頁面將變爲您要轉換到的菜單。這意味着最後一頁被隱藏，因爲它不再處於活動狀態。事實上，當轉換完成時，「內容」消失的其他頁面可以看到。

您可以在調用菜單的鏈接上嘗試此操作 - 嘗試使用對話框。您仍然需要在那裏應用您的自定義轉換。我認爲你想要完成的任務可能還會涉及一個名爲「子頁面」的插件，它可能會讓你看到你試圖實現的目光。另外還有splitview（http://asyraf9.github.com/jquery-mobile/）或者你可以嘗試搞亂JQM的1.2分支，看看POPUP的人是否也可以讓你在那裏。實質上，它是一個可以位於現有活動頁面頂部的div。

<a href="foo.html" data-rel="dialog">Open dialog</a> 

我本來是用一個對話框，幻燈片向上/向下效果 - 但它的Android變得太麻煩，所以我們去掉它。

我不認爲JQM是真正設計的默認情況下保持兩頁活躍和可見一次。