目前我正在使用pjax加载片段并覆盖我网站页面的主页面。然后我用jquery更改body类,以允许一些样式更改。这很好,但浏览器后退按钮不起作用,因为在点击pjax触发器时触发了body类更改,因此body保持了overlay的类。
当您点击某个项目时,我正在寻找的效果与此网站非常相似。
显然这不起作用所以必须有更好的方法。
以下是我的代码示例:
$('.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(); });
})
答案 0 :(得分:5)
尝试使用 beforeSend 和完整属性将其设为简单的PJAX请求。
beforeSend 属性将在触发http请求之前执行。我在为某个AJAX / PJAX事件制作加载器时经常使用它。每当用户触发事件(即单击按钮)时,分配给 beforeSend 的函数会隐藏我正在更新的div的内容并在其中放置一个gif加载器,从而提供良好的用户体验
完整属性将在请求的页面加载后执行。如果我使用我给加载器提供的示例,您可以创建分配给完整属性的函数,隐藏加载器图像并使用所请求页面中加载的内容更新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。