bootstrap-switch(开关插件)

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

需导入的文件

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

bootstrap文件可以到这里去下载：

html：

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

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

bootstrap-switch属性

覆盖全局默认值：

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

示例图：