用pjax實現覆蓋的最佳方式

Question

目前我使用pjax加載一個片段並覆蓋我網站頁面的主頁面。然後我用jquery更改body類以允許一些樣式更改。這很好，但瀏覽器後退按鈕不起作用，因爲它應該是由於點擊pjax觸發器觸發了主體類更改，因此主體維護覆蓋層的類。

當您點擊一個項目時，我正在尋找的效果與本網站非常相似。

http://www.watsonnyc.com/

顯然，這不是工作，所以必須有這樣做的更好的方法。

這裏是我的代碼示例：

$('.back').pjax('.info_overlay', { fragment: '.info_overlay',}).live('click', function(){ 
    $('body').removeClass("info").addClass("work"); 
    $('.info_overlay') 
    .bind('pjax:start', function() { $(this).fadeOut(duration); }) 
    .bind('pjax:end', function() { $(this).hide(); });  
}) 

Answer 1

儘量使其與beforeSend和完整屬性的簡單PJAX請求。

beforeSend屬性將在http請求被觸發前執行。我經常在爲某個AJAX/PJAX事件製作加載器時使用它。每當用戶觸發事件（即點擊一個按鈕）時，被分配到beforeSend之前的函數隱藏我正在更新的div的內容並在那裏放置一個gif加載器，這給用戶提供了很好的體驗。

complete屬性將在請求的頁面加載後執行。如果我使用加載器給出的示例，則可以將該功能分配給完整的屬性，隱藏加載器映像並使用所請求頁面中加載的內容更新div。

這裏是裝載機形象的例子：

$.pjax({ 
    url: 'requested_page.php', 
    container: '#updated_div', 
    beforeSend: function(){ 
     $('#loader_place').fadeIn('normal'); // This will fade in a hidden div with fixed centered position 
    }, 
    complete: function(){ 
     $('#loader_place').fadeOut('normal'); // This will fade out the div and make it invisible again 
    } 
}); 

如果你想要做的事比較複雜，我建議你閱讀PJAX Documentation。