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

当前位置:主页 > jQuery库 > 按钮和图标 > 基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-02-05
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

这是一款基于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
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', 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事件可以触发。它返回两个参数:eventdatadata是一个包含el(input DOM元素)和value(input DOM元素状态)的对象。

浏览器兼容

兼容所有现代浏览器,包括IE9+。

网友评论