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
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)

基于Bootstrap的超酷jQuery开关按钮插件的更多相关文章

  1. 【转】基于Bootstrap的超酷jQuery开关按钮插件

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

  2. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  3. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  4. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  5. 基于jQuery8款超赞的评分插件

    基于jquery8款超赞的评分插件.这是一款基于jquery.barrating插件实现的,该评级小部件可灵活设置CSS样式.具体效果请查看演示.效果图如下: 在线预览   源码下载 实现的代码. h ...

  6. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  7. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  8. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  9. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

随机推荐

  1. 关于IE下AJAX的问题探讨

    今天JS练手的时候,想封装一个发送AJAX请求的对象,当然,是想要兼容全浏览器的.代码如下: var Ajax = { xhr: null, callback: null, XMLHttp: func ...

  2. C# 使用 AutoResetEvent 或 ManualResetEvent 同步两个线程

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 谈JavaScript组合拼接字符串的效率 --转载

    JavaScript组合拼接字符串的效率.在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值 ...

  4. POJ 3243 Clever Y (求解高次同余方程A^x=B(mod C) Baby Step Giant Step算法)

    不理解Baby Step Giant Step算法,请戳: http://www.cnblogs.com/chenxiwenruo/p/3554885.html #include <iostre ...

  5. UVA 11609 Teams 组合数学+快速幂

    In a galaxy far far away there is an ancient game played among the planets. The specialty of the gam ...

  6. Android 注入详解

    Android下的注入的效果是类似于Windows下的dll注入,关于Windows下面的注入可以参考这篇文章Windows注入术.而Android一般处理器是arm架构,内核是基于linux,因此进 ...

  7. tomcat简介及原理解说

    Tomcat简介 作者:杨晓(http://blog.sina.com.cn/u/1237288325) 目录: ----Tomcat背景 ----Tomcat目录 ----Tomcat类加载 --- ...

  8. 更改cmd代码页,修正语言显示

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 rem 英文 chcp 437   rem 日文 chcp 932   rem 简体中文 chcp 936   re ...

  9. 连接池和 "Timeout expired"异常【转】

    异常信息: MySql.Data.MySqlClient.MySqlException (0x80004005): error connecting: Timeout expired. The tim ...

  10. Assembly(c#中简单说明[转]

    什么是Assembly(程序集)?Assembly是一个包含来程序的名称,版本号,自我描述,文件关联关系和文件位置等信息的一个集合.在.net框架中通过Assembly类来支持,该类位于System. ...