前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科

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

界面设计 7v 18天前  次浏览

简要教程

这是一款基于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)

相关链接

发表评论