这是一款基于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();
配置参数(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 |
|
|
onSwitchChange | Function | 开关按钮状态发生改变时的回调函数 | Function |
|
全局默认值覆盖
可以通过下面的方法来覆盖库中的默认参数配置:
$.fn.bootstrapSwitch.defaults.size = 'large'; $.fn.bootstrapSwitch.defaults.onColor = 'success';
方法(Bootstrap 3)
在Bootstrap Switch中,每一个配置参数都是一个方法。
如果第二个参数被省略, 方法返回当前值。
你可以按下面的方式调用方法:
$('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) |
配置参数(Bootstrap 2.0.1)
只有使用data-*
属性的元素才能使用下面的参数。
checked
, disabled
and readonly
属性是例外的参数,它们可以在HTML input
元素上直接使用。
在初始化时不可以通过js来指定任何参数。
名称 | 类型 | 描述 | 参数值 | 默认值 |
---|---|---|---|---|
state | Boolean | checkbox的状态 | true, false | 'checked' attribute or true |
size | String | checkbox的尺寸 | '', 'mini', 'small', 'normal', 'large' | '' |
animate | Boolean | 开关按钮动画 | true, false | true |
disabled | Boolean | Disable状态 | true, false | 'disabled' attribute or false |
readonly | Boolean | Readonly状态 | true, false | 'readonly' attribute or false |
on | String | 开关按钮左边的颜色 | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
off | String | 开关按钮右边的颜色 | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
on-label | String | 开关按钮左边的文字 | String | 'ON' |
off-label | String | 开关按钮右边的文字 | String | 'OFF' |
text-label | String | 开关按钮中间label的文本 | String | ' ' |
label-icon | String | 开关按钮中间的文本。用来添加外部的字体图标。 | String | null |
方法(Bootstrap 2.0.1)
方法名称 | 方法描述 | 接收值 | 返回值 |
---|---|---|---|
state | 获取checkbox状态 | true, false | |
setState | 设置checkbox状态 | (value: true, false)[, skip: true, false] | jQuery Object (input element) |
toggleState | 切换checkbox状态 | [skip: true, false] | jQuery Object (input element) |
toggleRadioState | 切换radio状态 | [skip: true, false] | jQuery Object (input element) |
toggleRadioStateAllowUncheck | 切换开关按钮的radio状态允许radio设置为uncheck | [uncheck: true, false | skip: true, false] | jQuery Object (input element) |
setSizeClass | 设置开关按钮的尺寸 | '', 'mini', 'small', 'normal', 'large' | jQuery Object (input element) |
setAnimated | 设置开关按钮的动画 | true, false | jQuery Object (input element) |
isDisabled | 获取开关按钮的disabled状态 | true, false | |
setDisabled | 设置开关按钮的disable状态 | true, false | jQuery Object (input element) |
toggleDisabled | 切换开关按钮的disabled状态 | jQuery Object (input element) | |
isReadOnly | 获取开关按钮的Readonly状态 | true, false | |
setReadOnly | 设置开关按钮的Readonly状态 | true, false | jQuery Object (input element) |
toggleReadOnly | 切换开关按钮的readonly状态 | jQuery Object (input element) | |
setOnClass | 设置开关按钮左边文本的颜色 | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
setOffClass | 设置开关按钮右边文本的颜色 | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
setOnLabel | 设置开关按钮左边文本 | String | jQuery Object (input element) |
setOffLabel | 设置开关按钮右边文本 | String | jQuery Object (input element) |
setTextLabel | 设置开关按钮中间的label文本 | String | null |
setTextIcon | 设置开关按钮中间的label文本。用于添加外部的字体图标。 | String | null |
destroy | 销毁Bootstrap开关按钮对象。 | jQuery Object (input element) |
事件(Bootstrap 2.0.1)
只有switch-change
事件可以触发。它返回两个参数:event
和
data
。data
是一个包含el
(input DOM元素)和value
(input DOM元素状态)的对象。
浏览器兼容
兼容所有现代浏览器,包括IE9+。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!