jQuery简洁实用的滑动按钮插件

这是一款非常实用的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();