GitHub Slider JQuery插件 [英] GitHub Slider JQuery Plugin

问题描述

新的Github HTML5和CSS3（HTML5历史API）树型导航非常棒：
https://github.com/blog/760-the-tree-slider

The new Github HTML5 and CSS3 (HTML5 History API) tree navigation is great: https://github.com/blog/760-the-tree-slider

他们使用哪个JQuery插件来做UI滑动效果？或者也许是一个类似的（JQuery的幻灯片与Ajax加载）

Which JQuery Plugin are they using to do the UI slide effect? Or maybe a similar one (Jquery Slide with Ajax loading)

谢谢

Thanks

推荐答案

我浏览了他们的源代码，他们没有使用CSS3或插件。它使用jquery动画。他们在 Github博客上给出的代码片段是一个好的开始，但是popstate处理程序是误导性的。试试这个：

I looked through their source code and they are NOT using CSS3 or a plugin. It uses jquery animate. And the code snippets they give on the Github blog are a good start, but the popstate handler is misleading. Try this instead:

$(window).bind('popstate', function (e) {
    if (e.originalEvent.state && e.originalEvent.state.path) {
        $.get(e.originalEvent.state.path, function(data) {
            $('#slider').slideTo(data);      
        });
        return false;
    }
    return true;
}

实际滑动使用更多技巧：

The actual sliding uses more tricks:

1. set #slider overflow：隐藏


2. 获取动画片段的宽度。


3. 创建一个传输div， b
4. 将原始div的内容复制到临时div（当前）。


5. 将新内容放入另一个临时div（下一个）。


6. 将当前和下一个并排放入传输中。
   
7. 从原始div中移除内容并放入新的传输div（应该看起来相同）。
8. animate转换div - 新外观完整。


9. 替换o与新数据一起使用的riginal div内容（与前一步骤相同）。

1. set #slider overflow: hidden
2. get the width of the section to animate.
3. create a transfer div twice this width (transfer).
4. copy the contents of the original div to a temp div (current).
5. put the new contents in another temp div (next).
6. put current and next side by side into transfer.
7. remove content from original div and put new transfer div in (should look the same).
8. animate transfer div - new look complete.
9. replace original div contents with new data (looks the same as previous step).

这里是左侧的幻灯片：

Here's slide left:

$.fn.slideTo = function(data) {
    var width = parseInt($('#slider').css('width'));
    var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' });
    var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html());
    var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data);
    transfer.append(current).append(next);
    $('#slider').html('').append(transfer);
    transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function () {
        $('#slider').html(data);
    });
}

下面是一个工作示例：滑块示例。点击支持历史的浏览器的菜单。我开始使用CSS3，但使用jquery动画回调来检测转换/转换完成的时间更简单。

And here's a working example: Slider example. Click on the menu with a browser that supports history. I started to use CSS3, but detecting when the transition/transform is complete is easier with the jquery animate callback.

这篇关于GitHub Slider JQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！