使用pjax实现叠加层的最佳方法

Question

目前我正在使用pjax加载片段并覆盖我网站页面的主页面.然后我用jquery更改body类,以允许一些样式更改.这很好但浏览器后退按钮不能正常工作,因为在点击pjax触发器时触发了body类更改,因此body保持了overlay的类.

当你点击一个项目时,我正在寻找的效果与这个网站非常相似.

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

尽量做到用一个简单的PJAX要求beforeSend和完整的属性.

该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文档.