基于Bootstrap的超酷jQuery开关按钮插件

这是一款基于bootstrap的超酷jQuery开关按钮插件。该开关按钮插件可以将复选框和单选按钮转换为安卓样式的开关按钮。该插件可以设置开关按钮的颜色、是否可用、显示文本等属性，还可以将开关按钮放置到模态窗口中显示。

使用方法

首先要在页面中引入依赖文件： jquery、Bootstrap、Bootstrap Switch CSS和Bootstrap Switch JS。

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
                

然后在中添加checkbox：

<input type="checkbox" name="my-checkbox" checked>
                

通过下面的代码来初始化该开关按钮插件：

$("[name='my-checkbox']").bootstrapSwitch();
                

配置参数(Bootstrap 3)

function(event, state) {}

function(event, state) {}

全局默认值覆盖

可以通过下面的方法来覆盖库中的默认参数配置：

$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';
                

方法(Bootstrap 3)

在Bootstrap Switch中，每一个配置参数都是一个方法。

如果第二个参数被省略, 方法返回当前值。

你可以按下面的方式调用方法：

$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
                

附加方法

特殊行为

• state方法的第三个参数为可选参数skip，如果为true，switchChange事件将不被执行，默认值为false。
• toggleState方法的第二个参数为可选参数skip，如果为true，switchChange事件将不被执行，默认值为false。
• wrapperClass方法可以在第二个参数接收一个false值，这样它将把class重置会默认。

事件(Bootstrap 3)

所有的事件都被添加到名称空间中，在你执行事件的时候需要追加.bootstrapSwitch。你可以像下面这样注册事件：

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});
                

配置参数(Bootstrap 2.0.1)

只有使用data-*属性的元素才能使用下面的参数。

checked, disabled and readonly属性是例外的参数，它们可以在HTML input元素上直接使用。

在初始化时不可以通过js来指定任何参数。

方法(Bootstrap 2.0.1)

事件(Bootstrap 2.0.1)

只有switch-change事件可以触发。它返回两个参数：event 和 data。data是一个包含el（input DOM元素）和value（input DOM元素状态）的对象。

浏览器兼容

兼容所有现代浏览器，包括IE9+。