bootstrap-switch开关组件使用

作者: JONE 分类: PHPer 发布时间: 2020-02-27 11:38

首先在bootCDN https://www.bootcdn.cn/ 上下载好需要用到文件并引入jquery.js,bootstrap.min.css,bootstrap-switch.min.css,bootstrap-switch.min.js,bootstrap.min.css请到官网下载http://www.bootcss.com/

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

<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

文件都引入之后就开始制作开关了

<input style="margin-right: 5px;" name="status" type="checkbox"  checked>
            // 开关
 $('[name="status"]').bootstrapSwitch({    //初始化按钮
       onText:"Yes",
       offText:"No",
       onColor:"success",
       offColor:"info",
       size:"small",
       onSwitchChange:function(event,state){
          if(state==true){
               console.log("开启");
             }else{
              console.log("关闭");
             }
         }
    });

原文链接 https://www.jianshu.com/p/10c56ab882cb