【转】基于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开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 基于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实现的进度 ...
随机推荐
- Fiddler 过滤图片
fiddler过滤无用图片操作步骤1.在右侧Filters中勾选 Hide if URL contains 2.在 Hide if URL contains 中加入下面一行过滤图片代码 REGEX:( ...
- 8.1 Spark MLlib简介
一.什么是机器学习 机器学习可以看做是一门人工智能的科学,该领域的主要研究对象是人工智能.机器学习利用数据或以往的经验,以此优化计算机程序的性能标准. 机器学习强调三个关键词:算法.经验.性能 二.基 ...
- 求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。例如2+22+222+2222+22222。
方法一: var num = ""; var nums = []; var a = Number(prompt());//所要拼接的数字 var b = Number(prompt ...
- 201871010108-高文利《面向对象程序设计(java)》第十四周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ht ...
- LG5239 回望京都 组合数+暴力
问题描述 LG5239 题解 我就是个傻逼,鉴定完毕. 连 \(C_m^n=C_{m-1}^n+C_{m-1}^{n-1}\) 都忘了. 所以暴力求出 \(1000\) 以内的 \(C_i^j\) , ...
- 基于mysqld_multi实现MySQL 5.7.24多实例多进程配置
学习环境: 操作系统 IP地址 主机名 软件包 备注 CentOS7.5 192.168.200.111 localhost 实验初始配置:所有主机关闭防火墙与selinux [root@ ...
- HTML连载47-设计思想、浮动元素高度问题
一.设计网页的思想 拿到需求之后我们先对各个模块(盒子)进行划分,然后从外到内进行设计(1)设计一个盒子最基本的设计大致包括背景颜色(其实用于识别),宽,高,边界浮动流还是标准流. (2)然后盒子和盒 ...
- win10启动telnet
1.点击win菜单,点击设置图标 2.选择系统选项 3.选择应用与程序选项 4.拉到最下方,选择程序与功能 5.选择启用或关闭windows功能 6.下拉找到telnet客户端选项勾选
- 零基础学python,python视频教程
零基础学python,python视频教程 这是我收集到的互联网上的视频资源,所有内容均来自互联网.仅供学习使用. 目前我在也在学习过程中,会把学习过程中遇到问题以及解决问题的方式,总结到我的公众号[ ...
- log4net快速上手
原文地址:https://www.cnblogs.com/lsgsanxiao/p/5845300.html 略有删改 1.配置文件,可以单独创建log4net.config文件,然后手动指定目录,也 ...