基于Bootstrap的超酷jQuery开关按钮插件
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 |
|
|
onSwitchChange | Function | 开关按钮状态发生改变时的回调函数 | Function |
|
全局默认值覆盖
可以通过下面的方法来覆盖库中的默认参数配置:
$.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) |
基于Bootstrap的超酷jQuery开关按钮插件的更多相关文章
- 【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
- 基于Bootstrap的炫酷jQuery slider插件
简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- 基于jQuery8款超赞的评分插件
基于jquery8款超赞的评分插件.这是一款基于jquery.barrating插件实现的,该评级小部件可灵活设置CSS样式.具体效果请查看演示.效果图如下: 在线预览 源码下载 实现的代码. h ...
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
随机推荐
- codeforces #232 div2 解题报告
A:简单题:我们可以把点换成段处理,然后枚举段看是否被霸占了: #include<iostream> #include<]; ]=; ;i<=n;i++) { ...
- css两个form不换行,两个div并排代码
1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...
- swift-网络请求
跟着网上大神写了个,还有待提高啊:http://pan.baidu.com/s/1sjC5Pl7
- 2015年4月 非常干货之Python资源大全
[非常干货之Python资源大全]Python是一门美妙的语言,简单易用,容易提升.它是一门主流语言,却没有其它专业语言的弊病,从游戏,ML,GUI到科学和数学有着巨量的函数库. 直击现场 <H ...
- ARM系列产品
ARM7系列 ARM9系列 ARM9E系列 ARM10E系列 SecurCore系列 Intel的StrongARM ARM11系列 Intel的Xscale 其中,ARM7.ARM9.ARM9E和A ...
- ExtJs之进度条实现
慢慢按书上的作. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta h ...
- hdu 2873 Bomb Game 博弈论
SG函数打表,求NIM和!!! 代码如下: #include<cstdio> #include<cstring> #include<iostream> #inclu ...
- js判断一个对象是否包含属性的方式
判断一个对象是不是包含属性,我们这里提供三种方式 1,使用in 运算符 var obj = {name:'liwei'}; alert('name' in obj); // return true a ...
- 【uva753/poj1087/hdu1526-A Plug for UNIX】最大流
题意:给定n个插座,m个插头,k个转换器(x,y),转换器可以让插头x转成插头y.问最少有多少个插头被剩下. 题解: 最大流或者二分图匹配.然而我不知道怎么打二分图匹配..打了最大流.这题字符串比较坑 ...
- key-value数据库
http://blog.csdn.net/byane/article/details/6928519 传统的文件系统中,需要维护目录的层次结构,使用dentry,inode,directory等复杂结 ...