目前我正在使用 pjax 加载片段并覆盖我网站页面的主页。然后我使用 jquery 更改主体类以允许进行一些样式更改。这很好,但浏览器后退按钮不起作用,因为它应该由于单击 pjax 触发器而触发主体类更改,因此主体保持覆盖层的类。
当你点击一个项目时,我正在寻找的效果与这个网站非常相似。
显然这是行不通的,所以必须有更好的方法来做到这一点。
这是我的代码示例:
$('.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(); });
})
最佳答案
尝试使其成为一个带有 beforeSend 和 complete 属性的简单 PJAX 请求。
beforeSend 属性将在 http 请求触发之前执行。我在为某个 AJAX/PJAX 事件制作加载程序时经常使用它。每当用户触发事件(即单击按钮)时,分配给 beforeSend 的函数都会隐藏我正在更新的 div 的内容,并在那里放置一个 gif 加载器,这提供了良好的用户体验.
complete 属性将在请求的页面加载后执行。如果我使用我在加载器中提供的示例,您可以将函数分配给 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 .
关于jquery - 使用 pjax 实现覆盖的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10709813/