这个UI控件的jQuery版本(滑动切换开关)

Question

我在使用webapp时遇到了这个控件(这在仅限于邀请的测试版中)并且喜欢UI交互.webapp是使用prototype/scriptaculous构建的,我们通常在构建我们的Web应用程序时使用jQuery ..我的问题是,有没有人看过jQuery相当于这个UI元素？

我喜欢这种方法的几个不错的东西,而不是典型的无线电接收方法,是切换按钮的动画滑动效果,并且仍然可以在双击和调整大小光标上滑动.

由于我没有该元素的工作示例,因此我附加了一个链接以查看其中的屏幕截图.:)

http://www.youtube.com/watch?v=kdyBodu4bSM

我正在寻找的是一个jQuery插件,可以完成同样的事情..或jQuery中这样的代码片段.谢谢!

Answer 1

好吧,制作自己肯定不容易.不容易,但很有趣.这是我第一次尝试创建一个插件,请原谅糟糕的代码质量.该代码使用(但不是jQuery UI的扩展).具体来说,它使用了可拖动的句柄组件和一些UI CSS类.

这肯定是一项正在进行中的工作.它绝不是完成的.在宣布完成这件事之前,我希望看到这些事情:

1. 出于可访问性原因,用于移动手柄的键盘控制
2. 再次实现WAI-RIA标准,以实现可访问性
3. 设置更多选项,甚至是事件
4. 将代码重构为更易于管理的内容.

前两个非常重要,这也是为什么不应该使用此代码的原因.但是,欢迎您破解代码并使用它.关于如何使这件事更好地工作的所有建议都是受欢迎的.

现场演示:http://jsfiddle.net/RDkBL/7/

(function($) {
$.fn.slideButton = function(options) {
    // Settings
    var settings = $.extend({
        slideSpeed: 10,
        revertSpeed: 5,
        labelWidth: 0
    }, options);

    this.each(function() {
        var container = $(this);
        var label = container.children('label');
        var input = container.children(':radio');
        var maxWidth = 0;

        if (label.length != 2 || input.length != 2) {
            throw new Error("The container must contain two radio buttons and two labels");
        }

        // move() does the animation associated with
        // state changing for the button
        function move(direction, speed) {
            var amount = direction === 'right' ? halfWidth : -1;
            var duration = (direction === 'right' ? halfWidth - handle.position().left : handle.position().left) * speed;

            handle.animate({
                left: amount
            }, duration);

            input.eq(direction === 'right' ? 0 : 1).attr('checked', true);
        }

        // Handles changing by checking current state
        function updateState() {
            move(handle.hasClass('on') ? 'right' : 'left', settings.slideSpeed);
            handle.toggleClass('on');

            return false;
        }

        // Reverts position - think of this as
        // the opposite of updateState()
        function revert() {
            move(handle.hasClass('on') ? 'left' : 'right', settings.revertSpeed);
            return false;
        }

        // Adding classes and hiding input elements
        container.addClass('ui-sbutton-container ui-corner-all');
        input.addClass('ui-helper-hidden-accessible');

        label.addClass('ui-sbutton-label');

        // Setting label widths - if none set,
        // then loop through all of them and use the biggest
        if (settings.labelWidth) {
            maxWidth = settings.labelWidth;
        } else {
            label.each(function() {
                var w = $(this).outerWidth();
                if (w > maxWidth) {
                    maxWidth = w;
                }
            });
        }

        // Padding was useful for finding largest width,
        // but will now interfere when setting explicit widths
        label.width(maxWidth).css({
            'padding-left': 0,
            'padding-right': 0
        });

        // Getting all important half width for later use
        var halfWidth = (container.outerWidth() / 2);

        // Very messy chain that does element creation,
        // insertion and event handling all at once
        var handle = $('<a />')
        .addClass('ui-sbutton-handle  ui-corner-all').hover(function() {
            $(this).toggleClass('ui-sbutton-active');
        }).dblclick(function(){
            updateState();
            return false;
        }).appendTo(container).width(maxWidth - 1).draggable({
            containment: 'parent',
            axis: 'x',
            stop: function(event, ui) {
                var left = $(this).position().left;
                if ((left > (halfWidth - 1) / 2 && handle.hasClass('on')) || (left < (halfWidth / 2 - 1) && !handle.hasClass('on'))) {
                    updateState();
                } else {
                    revert();
                }
            }
        });

        // Set up initial state of the button
        if (input.first().is(':checked')) {
            move('right', 0);
        } else {
            handle.addClass('on');
        }
    });

    return this;
};})(jQuery);