1

目前我正在使用 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(); });    
})
4

1 回答 1

5

尝试使用beforeSend和complete属性使其成为简单的 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 文档。

于 2012-12-26T08:17:28.473 回答