Question

我正在使用Ajaxify，它使用History.js。

单击项目链接时，内容将通过ajax滑入，并更改URL。单击关闭按钮时，面板滑出并更新URL。简单。

但是，当我单击后退按钮而不是关闭按钮时，URL会更新（可能是由History.js正确触发），但面板不会滑回。这是因为有单独的代码控制幻灯片的进/出。

我要做的是找出你是否可以检测到后退按钮被触发的时间？阅读我认为使用.statechange的规范可能会有效，但可以选择每个.statechange，而不是后退按钮。

很少有注意事项 - 使用ajaxed内容滑出的面板称为.panel-slide'，当它打开时，它会显示类.opened以及何时关闭.closed。也许我们可以用它来帮助.statechange？

这是我的面板幻灯片代码

$(document).ready(function() {

$('.panel-slide').addClass('closed');

var e = $(window).width();

$('.panel-slide.closed').css('margin-left', e + 'px');

$(window).resize(function() {       
    var e = $(window).width();
    $('.panel-slide.closed').css('margin-left', e + 'px')
});

$('body').on('click', '.close-panel', function() {      
    $('.panel-slide').animate({marginLeft: e + 'px'}, 1e3, 'easeInOutCubic', function() {
        History.back();
    });
    $('.panel-slide').attr('class', 'panel-slide closed');
    $('ul li a').animate({
        opacity: 1
    }, 500, function() {});
});

$('ul li a').click(function() {
    $('.panel-slide').attr('class', 'panel-slide opened');
    $('ul li a').animate({
        opacity: 0
    }, 500, function() {});
});

});

我的整个修改过的ajaxify就在这里http://snippi.com/s/m0058ru

Answer 1

我遇到了同样的问题，历史回复和点击链接之间没有检测到。我改变了我的剧本并且它正常运作。

如果按下链接，我的脚本使用animateLeftToRight（）函数; 如果按下后退/前进按钮，我的脚本将使用animateRightToLeft（）;

函数

由于前进按钮，它不是最好的解决方案，但大多数访问者只使用后退按钮而不是前进按钮。

我会尝试尽可能完美地解释。

我添加了一个名为nextPage的变量，默认情况下这个变量为false。单击链接时，此变量设置为true。

你正在处理你的stateChanges，检查nextPage是否为真，然后使用普通动画。如果nextPage为false，请使用更改的动画。

动画制作完成后，再次将nextPage设为false。

var nextPage = false;

$('a').click(function(){
    nextPage = true;
    if(nextPage){
        animateRightToLeft();
    }
    else{
        animateLeftToRight();
    }
});

function animateLefToRight(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

function animateRightoLeft(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

我希望您有足够的信息来使用它并将其集成到您的脚本中。我已经成功完成了这个脚本，只有我的脚本要复杂才能显示在这里，所以我简单地完成了它。

检测后退按钮触发器（使用Ajaxify和History.js）

1 个答案: