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

问题描述

新的 Github HTML5 和 CSS3(HTML5 History 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 幻灯片效果?或者可能是类似的(带有 Ajax 加载的 Jquery Slide)

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

谢谢

推荐答案

我查看了他们的源代码，他们没有使用 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. 设置#slider 溢出:隐藏
2. 获取要设置动画的部分的宽度.
3. 创建一个两倍于这个宽度的传输 div(传输).
4. 将原始 div 的内容复制到临时 div(当前).
5. 将新内容放入另一个临时 div(下一个).
6. 将当前和下一个并排传输.
7. 从原始 div 中删除内容并放入新的传输 div(应该看起来相同).
8. 动画传输 div - 新外观完成.
9. 用新数据替换原始 div 内容(看起来与上一步相同).

这是向左的幻灯片:

$.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 animate 回调更容易检测转换/转换何时完成.

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 滑块 JQuery 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！