bootstrap滑动开关插件使用

下载和演示插件地址

需要引入的css和js

1 <link rel="stylesheet" type="text/css" href="/css/common/bootstrap-switch.css">
2 <script src="js/common/jquery-1.11.1.min.js"></script>
3 <script type="text/javascript" src="/js/common/bootstrap-switch.js"></script>

html代码

1 <div class="bootstrap-switch bootstrap-switch-large">
2     <input type="checkbox" name="mycheck"/>
3 </div>

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 })
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 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';

 

原文地址

 

posted @ 2017-01-12 09:59  suruozhong  阅读(15205)  评论(0)  编辑  收藏  举报