基于Bootstrap的switch button

Bootstrap Switch 快速指南

最新推荐文章于 2022-10-18 14:14:07 发布

原创最新推荐文章于 2022-10-18 14:14:07 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何使用 Bootstrap Switch 插件将普通的 HTML checkbox 转换为美观且交互丰富的开关按钮。文中详细展示了必要的依赖引入步骤、初始化方法及一些自定义配置选项。

背景

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

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