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属性名类型描述取值范围默认值
statecheckedBoolean选中状态true、falsetrue
sizedata-sizeString开关大小null、mini、small、normal、largenull
animatedata-animateBoolean动画效果true、falsetrue
disableddisabledBoolean禁用开关ture、falsefalse
readonlyreadonlyBoolean开关状态只读,不能修改true、falsefalse
indeterminatedata-indeterminateBoolean模态true、falsefalse
inversedata-inverseBoolean颠倒开关顺序true、falsefalse
radioAllOffdata-radio-all-offBoolean允许单选按钮被用户取消选中true、falsefalse
onColordata-on-colorString左侧开关颜色primary、info、success、warning、danger、defaultprimary
offColordata-off-colorString右侧开关颜色primary、info、success、warning、danger、defaultdefault
onTextdata-on-textString左侧开关显示文本StringON
offTextdata-off-textString右侧开关显示文本StringOFF
labelTextdata-label-textString开关中间显示文本String&nbsp;
handleWidthdata-handle-widthString|Number开关左右2侧的宽度String|Numberauto
labelWidthdata-label-widthString|Number开关中间的宽度String|Numberauto
baseClassdata-base-classString开关基础样式Stringbootstrap-switch
wrapperClassdata-wrapper-classString | Array元素样式容器String | Arraywrapper
onInit function初始化开关Functionfunction(event,state){}
onSwitchChange function当开关状态改变时触发Functionfunction(event,state){}



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值