2014-02-25 85 views
0

我實現了swipe for history back/forward以及caching the DOM使用jQuery Mobile DOM高速緩存進行後退/前進歷史導航

說這是頁面結構

Homepage 
    Page 1 
    Page 1A 
    Page 2 

當您導航如下:

首頁>第1頁>第1A

3頁緩存

<div data-url="home.aspx">... 
<div data-url="page1.aspx">... 
<div data-url="page1a.aspx" class="ui-page-active">... 

如果你回去兩次(到主頁)並轉到第2頁,第1頁和第1A頁仍然是cac hed :(

<div data-url="home.aspx">... 
<div data-url="page1.aspx">... 
<div data-url="page1a.aspx">... 
<div data-url="page2.aspx" class="ui-page-active">... 

如果您現在從第2頁向後滑動,您將進入第1A頁。這也將使緩存巨大。

一旦你進入第2頁,你是如何清除第1頁和第1A頁的?
因此,它應該是這樣的:

<div data-url="home.aspx">... 
<div data-url="page2.aspx" class="ui-page-active">... 

換句話說,我要刷卡的工作完全像任何瀏覽器的後退/前進按鈕。
(我需要滑動以改進UX,因爲手機上沒有專用的後退/前進按鈕)

回答

0

這似乎解決了問題。

$("body").on("pagecontainerbeforeload", function(event,ui) { 
    $('div.ui-page-active').nextAll('div[data-role="page"]').remove(); 
}); 

因此,每次單擊某個鏈接時,它將刪除當前活動節點之後的所有頁面。