滑动按钮 html5,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

jQuery(function($) {

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

});

参数

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元素

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

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

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