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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD2Ax5CuXHTjIoseQOrA0IEIgvpAsnAls1BEiEwXap2YKbT45I2P708WomFw/JGYBKYTkIo60l8A8QRIJQFSSYBUEiCVBEglAVJJgFQSIJUESCXxQ9Z1vVqtptOpQa2cc0R0OBzYf3ZmyLquv5wbTej1fdbtf2ay8c7xno7Ho/feWstuyQxJRB92KS6XLeQp7z0R8Y7JDOmce3krxeUyhwwhWGt5B2SGNMaIsz0FpDGGd0BAygRIQKYDpEyABGQ6QMoESECmA6RMgARkuhwgy+EmGmKz7t1+5Pvx/oUPi/89BeSdI0vqIAfrKoQYpmf2IeyHg6ZxLAfIVLKQ5XATKnP7bLZn9pfjshxuwrhYjq+0gEwnCjlYV7HQdfuRO0HGtIBMJwpZ+OY/YuNIHRfJF4BM9yyQn93Cn696AJlK/NTavCL95dR6er+/CJUpAZnsKS52msAGkImyuP2ILdu3HxHkyXhfAbKVNORF61rrgUAMed4ZkK1ygHz4xjtHlgAJyHSAlAmQgEwHSJkACch0gJQpd0gsGfhjuS8ZIKLRhMTlMof03s/nc94x+ZfVGWNys+Sd451tt1vn3G634x32IQtdichay7pCVEnW2tls9gQLXZFUgFQSIJUESCUBUkmAVBIglQRIJQFSSd9JYRCF/soHnAAAAABJRU5ErkJggg==” alt=”” />

简要教程

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

使用方法

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

<link href="bootstrap.css" rel="external nofollow"  rel="stylesheet">
<link href="bootstrap-switch.css" rel="external nofollow"  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();
或者
$('input[name="my-checkbox"]').bootstrapSwitch({
        "onColor" : "success",
        "offColor" : "success",
        "onText" : "男",
        "offText" : "女"
    });

配置参数(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')
$('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
});