bootstrap switch 的使用


首先需要引入bootstrap的css和js文件,再引入bootstrap-switch.css和bootstrap-switch.js文件

<script type="text/javascript" src="bootstrap-switch.min.js"></script> 
 	 	<link rel="stylesheet" type="text/css" href="bootstrap-switch.min.css" />

下载地址:http://www.bootcss.com/p/bootstrap-switch/
html代码:

<div class="switch">
 	 	 <input type="checkbox" name="switch">
 	 	</div>

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

复制代码
$('[name="switch"]').bootstrapSwitch({ 
 	 	 onText:"启动", 
 	 	 offText:"停止", 
 	 	 onColor:"success", 
 	 	 offColor:"info", 
 	 	 size:"small", 
 	 	 onSwitchChange:function(event,state){ 
 	 	 if(state==true){ 
 	 	 $(this).val("1"); 
 	 	 }else{ 
 	 	 $(this).val("2"); 
 	 	 } 
 	 	 } 
 	 	 })
复制代码

覆盖全局属性:

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

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 &nbsp;
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

Read More