bootstrap-switch开关组件

原文地址：https://blog.csdn.net/mafan121/article/details/50402070

最近在项目开发上遇到一个需要开关的地方，后来找了下angular-switch.js发觉样例太少，而且还需要翻墙去找，对于我这种英文菜鸟来说太麻烦了，所以选了个bootstrap-switch.js插件，发觉效果还可以。下面简单介绍下bootstrap-switch的使用。

 

需导入的文件

 

1. <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/js/bootstrap-switch.min.js"></script>

2. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.min.css" />

3. <pre name="code" class="html"><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/bootstrap-switch-master/docs/js/jquery.min.js" />

 

bootstrap文件可以到这里去下载：http://www.bootstrap-switch.org/

 

 

html：

 

<input name="status" type="checkbox" data-size="small">

通过js来实现开关的初始化

 

 

1. $('[name="status"]').bootstrapSwitch({

2. onText:"启动",

3. offText:"停止",

4. onColor:"success",

5. offColor:"info",

6. size:"small",

7. onSwitchChange:function(event,state){

8. if(state==true){

9. $(this).val("1");

10. }else{

11. $(this).val("2");

12. }

13. }

14. })

当然也可以直接将属性写在html中，下面罗列bootstrap-switch的属性及应用

 

 

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）｛｝

覆盖全局默认值：

 

1. $.fn.bootstrapSwitch.defaults.size = 'large';

2. $.fn.bootstrapSwitch.defaults.onColor = 'success';