Question

我目前正在建立一个新的投资组合网站。我正在使用Isotope进行我的投资组合项目的布局，同时使用AJAX加载详细信息。我正在利用CCS3过渡为“细节”内容添加一些不错的效果/过渡。单击项目组合项将淡出主要项目组合网格，然后将其替换为工作详细信息页面。以下是我在网上找到的一些内容，这是我到目前为止所做的工作。

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('.item-wrapper a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html .work-detail';
        $('.site-container').load(toLoad)
    }                                           
});

$('.item-wrapper a').click(function(){

    var toLoad = $(this).attr('href')+' .work-detail';
    $('.home').addClass('homeFade');
    setTimeout(loadContent, 900);
    $('#load').remove();
    $('.site-container').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('fast');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('.site-container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('.work-detail').fadeIn('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('fast');


    }
    setTimeout(workFadeUp, 1300);
    function workFadeUp() {
        $('.work-detail').addClass('work-detail-show');


    }
    return false;

});

我最初在使用$('.work-detail').addClass('work-detail-show');时出现了一些问题，因为我试图将其作为回调函数添加到showNewContent()，但它似乎表现为.work-detail尚未提供，所以在经过大量的试验/错误后，我现在已经延迟了。

基本上它是我喜欢它的表演方式，但现在已经到了我的脑海中。如何将这个编程设置到用户按下浏览器后退按钮的位置，这个AJAX调用以某种方式反转...淡出工作细节并将组合网格淡入......同时更新地址栏？

我看过History.js，但在阅读自述文件时，我有点像头灯。

我绝对不是jQuery / AJAX大师，但我愿意挖掘...只是觉得我已经成功了。

以下是我的开发网站http://bit.ly/U38SFB

的链接

另外，考虑到非AJAX路由，因为AJAX并没有真正增强可用性/功能只是提供了“酷加载”因素我创建了一个假的AJAX版本，运行相同的CSS转换并实际链接到页面

$(window)
.load(function () {

$('.work-detail')
    .addClass('work-detail-show');
});

$("a.fakeajax")
.click(function () {
$('.home')
    .addClass('homeFade');
var href = $(this)
    .attr('href');
// Delay setting the location for one second
setTimeout(function () {
    window.location = href
}, 700);

return false;
});

但仍有同样的问题，当按下浏览器后退按钮时，添加的淡出投资组合网格的类仍然存在。

Answer 1

你能做的就是：

window.onbeforeunload = function() {
    return "You are leaving the page"
}

你可以把一些其他代码放到服务器上发送请求以保存一些数据......但是，最后，所有这一切都是为了通过确认弹出窗口来惹恼客户端。

您无法控制浏览器按钮。他们抛出保存的URL的历史并加载它们。此外，您不能修改window.history entrys。

使用浏览器后退按钮反转AJAX调用

1 个答案: