基于Bootstrap的switch button

背景

本来是很简单的问题，由于那堵无形的墙，使得一些资料难以获取，再加上百度搜出来的代码基本都不能运行，然后就有点棘手了。。。

Switch Button

官网：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.

相关设置

如无意外的话这个按钮是可以滑动了。下面是一些参数、回调函数以及响应事件。

Name	Attribute	Type	Description	Values	Default
state	checked	Boolean	The checkbox state	true, false	true
size	data-size	String	The checkbox state	null, 'mini', 'small', 'normal', 'large'	null
animate	data-animate	Boolean	Animate the switch	true, false	true
disabled	disabled	Boolean	Disable state	true, false	false
readonly	readonly	Boolean	Readonly state	true, false	false
indeterminate	Boolean	indeterminate state	true, false	false
onColor	data-on-color	String	Color of the left side of the switch	'primary', 'info', 'success', 'warning', 'danger', 'default'	'primary'
offColor	data-off-color	String	Color of the right side of the switch	'primary', 'info', 'success', 'warning', 'danger', 'default'	'default'
onText	data-on-text	String	Text of the left side of the switch	String	'ON'
offText	data-off-text	String	Text of the right side of the switch	String	'OFF'
labelText	data-label-text	String	Text of the center handle of the switch	String	' '
baseClass	data-base-class	String	Global class prefix	String	'bootstrap-switch'
wrapperClass	data-wrapper-class	String | Array	Container element class(es)	String | Array	'wrapper'
onInit		Function	Callback function to execute on initialization	Function	function(event, state) {}
onSwitchChange		Function	Callback function to execute on switch state change	Function	function(event, state) {}

onText/offText可以不只是文字

$(function () {
     $("[name='my-checkbox']").bootstrapSwitch({
            onText:'<span class="glyphicon glyphicon-ok"></span>',
            offText:'<span class="glyphicon glyphicon-remove"></span>'
     });
})

这样的话，样式就是下面这样的了

      

状态事件监听：

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