bootstrap-switch

1.前言

在使用bootstrap的时候，发现其竟然没有集成开关组件，网上一搜才发现这个bootstrap-switch这个插件，值得注意的是，这个插件只是和bootstrap的样式风格相同，本身和bootstrap没什么关系。之所以写这个笔记，主要是因为这个插件文档少的可伶，在梳理完插件的配置项之后，做好笔记，以便后续使用。

2.基本使用

• 引入插件

//引入bootstrap-switch的css样式文件
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

//插件依赖jqeury
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
//引入bootstrap-switch的js文件
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

• 实例化

<div>
    <input type="checkbox" id="my-switch" checked>
</div>

$('#my-switch').bootstrapSwitch()

3.配置项

• 以下为源码中找到的配置项以及配置的默认值（注释是自己写的）

$('#my-switch').bootstrapSwitch({
    state: true,//开关状态
    size: null,//尺寸 mini small large
    animate: true,//开启动画效果
    disabled: false,//禁用
    readonly: false, 
    indeterminate: false,
    inverse: false,//方向反转
    radioAllOff: false,
    onColor: 'primary',//开启颜色 primary、info，primary，warning，warning，default
    offColor: 'default',//关闭颜色 primary、info，primary，warning，warning，default
    onText: 'ON',//开启时展示的文本
    offText: 'OFF',//关闭时展示的文本
    labelText: '&nbsp',//空白区域的文本
    handleWidth: 'auto',
    labelWidth: 'auto',
    baseClass: 'bootstrap-switch',
    wrapperClass: 'wrapper',
    onInit: function onInit() { },
    onSwitchChange: function onSwitchChange(event,state) { 
        //切换时的回调 state
    }
})

• 还可以在HTML中设定初始的配置项,附相关源码

<input type="checkbox" id="my-switch" checked data-size="small">

• 动态切换开关:再执行一次bootstrapSwitch()方法，传入要改变的配置项即可

$('#my-switch').bootstrapSwitch({state: true,//开关状态})