下一篇 »

一款bootstrap开关控件推荐,bootstrap-switch​

近期一个bootstrap项目需要用到一个开关控件来代替难看的checkbox选框,最终寻得bootstrap-switch

效果:

blob.png

获取:

插件官网:http://www.bootstrap-switch.org/

用法:


Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.

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

Add your checkbox.

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

Initialize Bootstrap Switch.

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

Enjoy.

添加触发时间:

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false});