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

Question

我在使用webapp (这是仅限邀请的测试版)时遇到了这个控件，并喜欢它的UI交互。webapp是使用prototype/webapp构建的，我们在构建web应用时通常使用jQuery。我的问题是，有没有人看到过与这个UI元素等效的jQuery？

我喜欢这种方法的几个优点，而不是典型的radioset方法，是切换按钮的动画滑动效果，并且仍然能够在双击和调整光标大小时滑动。

因为我没有该元素的工作示例，所以我附加了一个链接来查看它的实际屏幕截图。:)

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

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

Answer 1

嗯，这肯定不是一件容易的事。不容易，但很有趣。这是我第一次尝试创建插件，所以请原谅我糟糕的代码质量。代码使用(但不是) jQuery UI。具体地说，它使用句柄的可拖动组件，以及一些UI CSS类。

这当然是一项正在进行的工作。它决不会完成。在宣布这件事完成之前，我希望看到以下几件事：

用于移动手柄的WAI-

• 键盘控件，用于辅助功能的reasons

• Implement

• 标准，再一次用于accessibility

• Set up更多的选项，甚至可能将代码转换成更易于管理的东西。

前两个是非常重要的，也是为什么这段代码还不应该使用的原因。但是，欢迎您修改代码并使用它。欢迎所有关于如何让这个东西更好地工作的建议。

现场演示：

(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);

Answer 2

看看这个：http://papermashup.com/jquery-iphone-style-ajax-switch/

这应该正是您想要的。或者至少可以很容易地修改。点击页面下方的"DEMO“查看实际操作。

对于其他有趣的JQuery插件，请查看以下链接: 40个有用的JQuery插件：http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

20个很棒的JQuery按钮：http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

我经常提到它们:)

Answer 3

另外，请查看即将推出的jQuery Mobile库。他们会有一个和那个一样的控件。10月下旬的某个时候，我们显然应该首先看到一些产出。