2

我正在使用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

4

1 回答 1

3

我遇到了同样的问题，在历史记录和点击链接之间没有检测到。我已经更改了我的脚本并且它正在运行。

如果按下链接，我的脚本将使用函数 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;
}

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

于 2013-11-07T11:42:59.453 回答