实现与pjax覆盖最好的方法(best way to implement an overlay wi

2019-07-29 12:25发布

目前我使用pjax的片段加载和覆盖我的网站页面的主页。 我则改变了体类使用jQuery,让一些造型变化。 这是不错,但浏览器的后退按钮不起作用,因为它应该是由于体内类改变而引发了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请求。

HTTP请求被解雇之前beforeSend属性将被执行。 我做了一定的AJAX / PJAX事件程序的时候,经常使用它。 每当用户触发事件(即点击一个按钮),功能,分配给beforeSend,隐藏了我更新,并把一个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文档 。



文章来源: best way to implement an overlay with pjax