bootstrap-switch开关组件
原文地址：https://blog.csdn.net/mafan121/article/details/50402070
最近在项目开发上遇到一个需要开关的地方，后来找了下angular-switch.js发觉样例太少，而且还需要翻墙去找，对于我这种英文菜鸟来说太麻烦了，所以选了个bootstrap-switch.js插件，发觉效果还可以。下面简单介绍下bootstrap-switch的使用。
需导入的文件
bootstrap文件可以到这里去下载：http://www.bootstrap-switch.org/
html：
通过js来实现开关的初始化
-
$('[name="status"]').bootstrapSwitch({ -
onText:"启动", -
offText:"停止", -
onColor:"success", -
offColor:"info", -
size:"small", -
onSwitchChange:function(event,state){ -
if(state==true){ -
$(this).val("1"); -
}else{ -
$(this).val("2"); -
} -
} -
})
当然也可以直接将属性写在html中，下面罗列bootstrap-switch的属性及应用
| js属性名 | html属性名 | 类型 | 描述 | 取值范围 | 默认值 |
| state | checked | Boolean | 选中状态 | true、false | true |
| size | data-size | String | 开关大小 | null、mini、small、normal、large | null |
| animate | data-animate | Boolean | 动画效果 | true、false | true |
| disabled | disabled | Boolean | 禁用开关 | ture、false | false |
| readonly | readonly | Boolean | 开关状态只读，不能修改 | true、false | false |
| indeterminate | data-indeterminate | Boolean | 模态 | true、false | false |
| inverse | data-inverse | Boolean | 颠倒开关顺序 | true、false | false |
| radioAllOff | data-radio-all-off | Boolean | 允许单选按钮被用户取消选中 | true、false | false |
| onColor | data-on-color | String | 左侧开关颜色 | primary、info、success、warning、danger、default | primary |
| offColor | data-off-color | String | 右侧开关颜色 | primary、info、success、warning、danger、default | default |
| onText | data-on-text | String | 左侧开关显示文本 | String | ON |
| offText | data-off-text | String | 右侧开关显示文本 | String | OFF |
| labelText | data-label-text | String | 开关中间显示文本 | String | |
| handleWidth | data-handle-width | String|Number | 开关左右2侧的宽度 | String|Number | auto |
| labelWidth | data-label-width | String|Number | 开关中间的宽度 | String|Number | auto |
| baseClass | data-base-class | String | 开关基础样式 | String | bootstrap-switch |
| wrapperClass | data-wrapper-class | String | Array | 元素样式容器 | String | Array | wrapper |
| onInit | function | 初始化开关 | Function | function（event，state）｛｝ | |
| onSwitchChange | function | 当开关状态改变时触发 | Function | function（event，state）｛｝ |
覆盖全局默认值：
-
$.fn.bootstrapSwitch.defaults.size = 'large'; -
$.fn.bootstrapSwitch.defaults.onColor = 'success';
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！