基于Bootstrap的jQuery开关按钮插件

    按钮 下载

 

使用方法

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

?

1 2 3 4

<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：

?

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

　　

 

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

?

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

　　

事件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(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               }     }); });