这是一款非常实用的jQuery滑动按钮插件。该滑动按钮插件可以将元素转换为滑动按钮样式。插件中使用javascript来控制滑动按钮的滑动,样式使用纯CSS来制作。

浏览器支持

jQuery滑动按钮插件可以在支持jQuery 2的浏览器上工作,IE6-8不支持该插件。

IE9不支持CSS transitions,在IE9上不会有动画效果。

该滑动按钮支持Pointer、触摸屏和鼠标点击。

使用方法

首先要在页面中引入jQuery和jquery.onoff.css及jquery.onoff.js文件。然后可以使用两种方式调用该滑动按钮插件:

With AMD
define([ 'jquery', 'plugins/jquery.onoff' ], function( $ ) {
  $('input[type="checkbox"]').onoff();
});
    
With Script Tags
<script src="jquery.js"></script>
<script src="plugins/jquery.onoff.min.js"></script>
<script>
jQuery(function($) {
  $('input[type="checkbox"]').onoff();
});
</script>      
    

参数

OnOff.defaults = {
  // The event namespace
  // Should always be non-empty
  // Used to bind jQuery events without collisions
  namespace: '.onoff',

  // The class added to the checkbox
  className: 'onoffswitch-checkbox'
};      
    

事件

All methods can be called widget-style.

  • option()

    Returns: If getting, the option value; if setting, the jQuery collection for chaining.

    option()方法可以通过无参数调用返回所以得选项:

    var options = $input.onoff('option');          
            

    通过单个参数可以获取单个选项:

    var eventNamespace = $input.onoff('option', 'namespace');          
            

    可以通过键和值或键值对对象来设置选项:

    $input.onoff('option', 'namespace', 'newspace');
    $input.onoff('option', {
      namespace: 'newspace',
      className: 'newclass'
    });          
            
  • disable()

    Returns: jQuery for chaining

    将换单按钮对象设置为不可用并取消所有的事件。

    $input.onoff('disable');          
            
  • isDisabled()

    Returns: Boolean

    返回当前的滑动按钮状态是否是不可用状态。

    var disabled = $input.onoff('isDisabled');          
            
  • enable()

    Returns: jQuery for chaining

    使滑动按钮对象可用,并重新为它绑定事件。

    $input.onoff('enable');          
            
  • wrap()

    Returns: jQuery for chaining

    Ensures the HTML for the toggle switch is correct.This method only adds any missing HTML.

    $input.onoff('wrap');          
            
  • unwrap()

    Returns: jQuery for chaining

    Removes HTML related to OnOff, leaving only the checkbox.

    $input.onoff('unwrap');          
            
  • destroy()

    Returns: jQuery for chaining

    销毁滑动按钮对象并移除数据,但是不会调用unwrap()方法。

    $input.onoff('destroy');          
            
  • instance()

    Returns: OnOff

    返回OnOff实例。

    var instance = $input.onoff('instance');          
            

应用举例

添加需要的input元素

<input type="checkbox" />    
    

However, you can also start with the generated HTML to avoid FOUC

<div class="onoffswitch">
  <input type="checkbox" class="onoffswitch-checkbox" id="myonoffswitch" />
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>      
    

使用下面的方法初始化滑动按钮插件:

$('input[type=checkbox]').onoff();