基于Bootstrap的jQuery开关按钮插件

    按钮 ​​下载​​

 

使用方法

首先要在页面中引入依赖文件： ​​jquery​​、Bootstrap、Bootstrap Switch CSS和Bootstrap Switch JS。这里用的是bootstrap2

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

 

 

然后在中添加​​checkbox​​：

<input type="checkbox" name="my-checkbox" checked>

　　

 

通过下面的代码来初始化该开关按钮插件：

$("[name='my-checkbox']").bootstrapSwitch();

　　

事件：

$(function () {
          $("[name='my-checkbox']").bootstrapSwitch({
                size: "large",
                onSwitchChange: function(event, state) {
                  if(state)
                  {
                   //开启时触发的事件
                  }
                  else
                  {
                   //关闭时事件
                  }
                  console.log(this); // DOM element
                  console.log(event); // jQuery event
                  console.log(state); // true | false
                }
          });
        });

　　

 

作者：​​​panie​​​
本文内容为作者辛苦整理书写，欢迎转载，但请保留文章出处