基于Bootstrap的超酷jQuery开关按钮插件

2023-07-30 14:07:22

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD2Ax5CuXHTjIoseQOrA0IEIgvpAsnAls1BEiEwXap2YKbT45I2P708WomFw/JGYBKYTkIo60l8A8QRIJQFSSYBUEiCVBEglAVJJgFQSIJUESCXxQ9Z1vVqtptOpQa2cc0R0OBzYf3ZmyLquv5wbTej1fdbtf2ay8c7xno7Ho/feWstuyQxJRB92KS6XLeQp7z0R8Y7JDOmce3krxeUyhwwhWGt5B2SGNMaIsz0FpDGGd0BAygRIQKYDpEyABGQ6QMoESECmA6RMgARkuhwgy+EmGmKz7t1+5Pvx/oUPi/89BeSdI0vqIAfrKoQYpmf2IeyHg6ZxLAfIVLKQ5XATKnP7bLZn9pfjshxuwrhYjq+0gEwnCjlYV7HQdfuRO0HGtIBMJwpZ+OY/YuNIHRfJF4BM9yyQn93Cn696AJlK/NTavCL95dR6er+/CJUpAZnsKS52msAGkImyuP2ILdu3HxHkyXhfAbKVNORF61rrgUAMed4ZkK1ygHz4xjtHlgAJyHSAlAmQgEwHSJkACch0gJQpd0gsGfhjuS8ZIKLRhMTlMof03s/nc94x+ZfVGWNys+Sd451tt1vn3G634x32IQtdichay7pCVEnW2tls9gQLXZFUgFQSIJUESCUBUkmAVBIglQRIJQFSSd9JYRCF/soHnAAAAABJRU5ErkJggg==" alt="" />

简要教程

这是一款基于bootstrap的超酷jQuery开关按钮插件。该开关按钮插件可以将复选框和单选按钮转换为安卓样式的开关按钮。该插件可以设置开关按钮的颜色、是否可用、显示文本等属性，还可以将开关按钮放置到模态窗口中显示。

使用方法

首先要在页面中引入依赖文件： jquery、Bootstrap、Bootstrap Switch CSS和Bootstrap Switch JS。

<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();
或者
$('input[name="my-checkbox"]').bootstrapSwitch({
        "onColor" : "success",
        "offColor" : "success",
        "onText" : "男",
        "offText" : "女"
    });

配置参数(Bootstrap 3)

参数名称	属性	类型	描述	参数值	默认值
state	checked	Boolean	checkbox的状态	true, false	true
size	data-size	String	checkbox的尺寸大小	null, 'mini', 'small', 'normal', 'large'	null
animate	data-animate	Boolean	开关按钮是否动画	true, false	true
disabled	disabled	Boolean	Disable状态	true, false	false
readonly	readonly	Boolean	只读状态	true, false	false
indeterminate	data-indeterminate	Boolean	不确定的状态	true, false	false
inverse	data-inverse	Boolean	反转开关按钮的方向	true, false	false
radioAllOff	data-radio-all-off	Boolean	允许用户使用该radio按钮执行unchecked操作	true, false	false
onColor	data-on-color	String	开关按钮左边的颜色	'primary', 'info', 'success', 'warning', 'danger', 'default'	'primary'
offColor	data-off-color	String	开关按钮右边的颜色	'primary', 'info', 'success', 'warning', 'danger', 'default'	'default'
onText	data-on-text	String	开关按钮左边的文字	String	'ON'
offText	data-off-text	String	开关按钮右边的文字	String	'OFF'
labelText	data-label-text	String	开关按钮中间的Label文本	String	' '
handleWidth	data-handle-width	String \| Number	开关按钮左边和右边的宽度，单位像素	'auto' or Number	'auto'
labelWidth	data-label-width	String \| Number	开关按钮Label文本的宽度，单位像素	'auto' or Number	'auto'
baseClass	data-base-class	String	全局class前缀	String	'bootstrap-switch'
wrapperClass	data-wrapper-class	String \| Array	包裹开关按钮元素的class	String \| Array	'wrapper'
onInit		Function	开关按钮初始化后的回调函数	Function	`function(event, state) {}`
onSwitchChange		Function	开关按钮状态发生改变时的回调函数	Function	`function(event, state) {}`

全局默认值覆盖

可以通过下面的方法来覆盖库中的默认参数配置：

$.fn.bootstrapSwitch.defaults.size = 'large';

$.fn.bootstrapSwitch.defaults.onColor = 'success';

方法(Bootstrap 3)

在Bootstrap Switch中，每一个配置参数都是一个方法。

如果第二个参数被省略, 方法返回当前值。

你可以按下面的方式调用方法：

$('input[name="my-checkbox"]').bootstrapSwitch('state')
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

附加方法

方法名称	方法描述
toggleState	切换开关按钮的状态
toggleAnimate	切换动画的状态
toggleDisabled	切换disabled状态
toggleReadonly	切换readonly状态
toggleIndeterminate	切换indeterminate状态
toggleInverse	切换反向参数
destroy	销毁Bootstrap开关按钮

特殊行为

state方法的第三个参数为可选参数skip，如果为true，switchChange事件将不被执行，默认值为false。
toggleState方法的第二个参数为可选参数skip，如果为true，switchChange事件将不被执行，默认值为false。
wrapperClass方法可以在第二个参数接收一个false值，这样它将把class重置会默认。

事件(Bootstrap 3)

所有的事件都被添加到名称空间中，在你执行事件的时候需要追加.bootstrapSwitch。你可以像下面这样注册事件：

$('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

});

事件名称	事件描述	参数
init	在初始化时触发。 'this'引用指向DOM元素。	event (jQuery Event object)
switchChange	在开关按钮状态改变时触发。 'this'引用指向DOM元素。	event (jQuery Event object), state (true \| false)

码农公寓