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

Question

我在使用webapp（这是仅限邀请测试版）时遇到了此控件，并且喜欢UI交互。 webapp是使用prototype/scriptaculous构建的，我们通常在构建我们的web应用程序时使用jQuery ..我的问题是，有没有人看过与此UI元素相当的jQuery？

我喜欢这种方法的一些好处，而不是典型的radioset方法，是开关按钮的动画滑动效果，仍然可以滑动双击和调整大小光标。

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

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

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个图像

<!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; 
}