基于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实现的进度 ...
随机推荐
- 各大Oj平台介绍
1.题库与网站资源题库-在线提交系统(Online Judge)简介 下面是几个比较大的在线提交系统(OnlineJudge)里面有大量历年的竞赛题目,注册一个ID,然后用自己熟悉的语言(一般有P ...
- mysql if条件
#if表达式 SELECT reg_no, IF(reg_no='718170554','黄色宾利','红色宾利') FROM car WHERE reg_no IN ('718170554','12 ...
- python 安装 管理包 pip
2.7的坑里出不来了,现在已经换到3.4了,不存在下列问题. win7下安装pip http://blog.chinaunix.net/uid-24984661-id-4202194.html ...
- test1
test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1 ...
- XCODE快捷键个人总结
1.在方法名上用CMD+左键 可以查看完整的方法名
- Linux Command Line 解析
Linux Command Line 解析 0 处理模型 Linux kernel的启动包括很多组件的初始化和相关配置,这些配置参数一般是通过command line进行配置的.在进行后续分析之前,先 ...
- Delphi对象变成Windows控件的前世今生(关键是设置句柄和回调函数)goodx
----------------------------------------------------------------------第一步,准备工作:预定义一个全局Win控件变量,以及一个精简 ...
- Spring笔记——Spring框架简介和初次框架配置
Spring简介 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Deve ...
- 288. Unique Word Abbreviation
题目: An abbreviation of a word follows the form <first letter><number><last letter> ...
- Java:多线程之生产者与消费者
要求:用两个线程模拟存票.售票过程.但要求每存入一张票,就售出一张票,售出后,再存入,直到售完为止. 用到的知识点:线程等待.唤醒.可能的线程中断异常 下面的方式一和方式二采用的是唤醒所有等待的线程, ...