Question

我在使用网络应用程序时遇到此控件（这在仅限受邀者的测试版中），并且喜欢用户界面互动。 webapp是使用prototype / scriptaculous构建的，我们通常在构建我们的Web应用程序时使用jQuery ..我的问题是，有没有人看过jQuery相当于这个UI元素？

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

由于我没有这个元素的工作示例，我附上了一个链接来查看它的屏幕上限。：）

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

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

Answer 1

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

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

用于移动手柄的键盘控制，出于辅助原因
再次实施WAI-RIA标准以获取辅助功能
设置更多选项，甚至是事件
将代码重构为更易于管理的内容。

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

现场演示：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);

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月下旬的某个时候，我们应该首先看到一些产出。

Answer 4

使用3张图像的jquery滑块开关

<!DOCTYPE HTML>
<html>
    <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
       </script>
       <link type="text/css" rel="stylesheet" href="style.css">
       <script>
            $(document).ready(function() {
               $('.bool-slider .inset .control').click(function() {
                    if ($(this).parent().parent().hasClass('true')) {
                    $(this).parent().parent().addClass('false').removeClass('true');

                     } 
                     else
                    {
                    $(this).parent().parent().addClass('true').removeClass('false');
                    }  
                });
            });
        </script>
    </head>
    <body>  
        <div class="bool-slider false">
            <div class="inset">
                <div class="control"></div>
            </div>
        </div> 
    </body>
</html>


css code


.bool-slider.true .inset
{ 
    width:79px;
    height: 31px;
    background: url(images/On.png)no-repeat;

}
.bool-slider.true .inset .control
{
    float: left;
}
.bool-slider.true .inset .control:after
{
    content: 'On';
    position: relative;
    right: -135%;
    top: 20%;
}

.bool-slider.false .inset
{
        width:79px;
        height: 31px;
        background: url(images/Off.png)no-repeat;
}
.bool-slider.false .inset .control
{
    float: right;
}
.bool-slider.false .inset .control:before
{
    content: 'Off';
    position: relative;
    left: -100%;
    top: 20%;
}
.bool-slider .inset .control
{

    width: 40%;
    height: 100%;
    background: url(images/Button.png)no-repeat;
}

.bool-slider .inset .control:hover
{
    cursor: pointer;
}

这个UI控件的jQuery版本（滑动切换开关）

4 个答案: