用pjax实现覆盖的最佳方法 [英] best way to implement an overlay with pjax

问题描述

当前，我正在使用pjax加载片段并覆盖网站页面的主页.然后，我使用jquery更改body类，以允许进行一些样式更改.很好，但是浏览器后退按钮不起作用，因为应该通过单击pjax触发器来触发主体类更改，因此主体会保持覆盖层的类.

Currently I'm using pjax to load in a fragment and overlay the main page of my site page. I am then changing the body class with jquery to allow a few styling changes. This is fine but the browser back button doesn't work as it should due the body class change being triggered on click of the pjax trigger and therefor the body maintains the class of the overlay.

当您单击一个项目时，我正在寻找的效果与该站点非常相似.

The effect I'm looking for is quite similar to this site when you click on a project.

http://www.watsonnyc.com/

很显然，这是行不通的，因此必须有一种更好的方法.

Obviously this isn't working so there must be a better way of doing it.

这是我的代码示例:

$('.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请求.

Try to make it a simple PJAX request with beforeSend and complete attributes.

beforeSend 属性将在触发http请求之前执行.在为某个AJAX/PJAX事件制作加载程序时，我经常使用它.每当用户触发事件(即单击按钮)时，分配给 beforeSend 的函数就会隐藏我要更新的div的内容，并在其中放置gif加载器，从而提供良好的用户体验

The beforeSend attribute will be executed before the http request is fired. I use it often when making a loader for a certain AJAX/PJAX event. Whenever the user fires the event (i.e. clicks a button), the function, assigned to beforeSend, hides the content of the div that I am updating and places a gif loader there, which gives a nice user experience.

完成属性将在请求的页面加载后执行.如果我使用加载程序给出的示例，则可以使该函数分配给 complete 属性，隐藏加载程序映像，并使用请求页面中的加载内容更新div.

The complete attribute will be executed after the requested page loads. If I use the example I gave with the loader, you can make the function, assigned to the complete attribute, hide the loader image and update the div with the loaded content from the requested page.

以下是加载程序图片的示例:

Here is an example with the loader image:

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

If you want to do something more complicated, I suggest you read the PJAX Documentation.

这篇关于用pjax实现覆盖的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！