0

我目前正在建立一个新的投资组合网站。我目前正在使用 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;
});

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

4

1 回答 1

0

你所能做的就是：

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

您可以放置​​一些其他代码，例如，向服务器发送请求以保存一些数据......但是，最后，所有这些都是通过确认弹出窗口来惹恼客户端。

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

于 2013-01-31T18:36:48.377 回答