Bootstrap的Switch开关

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实现开关的初始化：

覆盖全局属性：

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

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

$('[name="switch"]').bootstrapSwitch({ 

        onText:"启动", 

        offText:"停止", 

        onColor:"success",  // 设置ON文本颜色(info/success/warning/danger/primary)

        offColor:"info",  // 设置OFF文本颜色(info/success/warning/danger/primary) 

        size:"small",  // 设置控件大小,从小到大  (mini/small/normal/large)

        onSwitchChange:function(event,state){ 

            if(state==true){ 

                $(this).val("1"); 

            }else{ 

                $(this).val("2"); 

            } 

        } 

})

 bootstrap-switch若想根据动态数据控制switch的状态，使用

$(this).bootstrapSwitch('state',!state,true);

$(element[0]).children().bootstrapSwitch().on('switchChange.bootstrapSwitch',function(target,state){

        $(this).bootstrapSwitch('state',!state,true);//阻止switch状态变化



        //......此处省略动态获取数据的代码



        //如果TRUE则状态改变，否则状态不变

        if（...){

              $this.bootstrapSwitch('toggleState',true);

        }

}）

这是我所学到的一些知识，在此分享给大家，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！