Bootstrap switch.js 开关插件 api

需要引入的文件

<link rel="stylesheet" href="css/bootstrap.min.css" />

<link rel="stylesheet" href="css/bootstrap-switch.min.css" />

<script type="text/javascript" src="js/jquery.min.js" ></script>

<script type="text/javascript" src="js/bootstrap-switch.min.js" ></script>

HTML元素

<input name="status" type="checkbox" data-size="small" id="status1" checked><br/><br/> 

<button id="open">开</button>

<button id="close">关</button>

JS代码

     $('[name="status"]').bootstrapSwitch({    //初始化按钮

       onText:"照明",  
       offText:"熄灭",  
       onColor:"success",  
       offColor:"info",  
       size:"small",  
       onSwitchChange:function(event,state){  
           if(state==true){  
               $(this).val("1");  
               console.log("开启");
           }else{  
               $(this).val("2");
               console.log("关闭");
           }  
       }  
   });
       $("#close").click(function(){
         $('[name="status"]').bootstrapSwitch('state', false); // 关闭按钮
       
       });          
       $("#open").click(function(){   
         $('[name="status"]').bootstrapSwitch('state', true); // 打开按钮       
       });

效果

-------下面是转载的Api--------------

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){}



发布了0 篇原创文章 · 获赞 0 · 访问量 9442
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览