按钮 下载

使用方法

首先要在页面中引入依赖文件: jquery、Bootstrap、Bootstrap Switch CSS和Bootstrap Switch JS。这里用的是bootstrap2

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

  

事件:

        $(function () {
$("[name='my-checkbox']").bootstrapSwitch({
size: "large",
onSwitchChange: function(event, state) {
if(state)
{
//开启时触发的事件
}
else
{
//关闭时事件
}
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
}
});
});

  

 

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

  1. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

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

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

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

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

  4. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  5. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  6. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  7. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  8. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  9. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

随机推荐

  1. 边工作边刷题:70天一遍leetcode: day 83

    Find the Duplicate Number 要点:通过Pigeonhole principle对值空间做binary search,具体来说, low,mid,high都是值空间,所以范围是[ ...

  2. ifrog-1028 Bob and Alice are playing numbers(trie树)

    题目链接: Bob and Alice are playing numbers DESCRIPTION Bob and his girl friend are playing game togethe ...

  3. POJ 3150 Cellular Automaton --矩阵快速幂及优化

    题意:给一个环,环上有n块,每块有个值,每一次操作是对每个点,他的值变为原来与他距离不超过d的位置的和,问k(10^7)次操作后每块的值. 解法:一看就要化为矩阵来做,矩阵很好建立,大白书P157页有 ...

  4. HDU 3600 Simple Puzzle 归并排序 N*N数码问题

    先介绍八数码问题: 我们首先从经典的八数码问题入手,即对于八数码问题的任意一个排列是否有解?有解的条件是什么? 我在网上搜了半天,找到一个十分简洁的结论.八数码问题原始状态如下: 1 2 3 4 5 ...

  5. centos下pip安装mysql_python

    今天在使用pip安装mysql_python时,遇到一些问题,现记录下来. 1.执行pip install mysql-python时,报错 Running setup.py egg_info for ...

  6. win10自动更新彻底关闭

    http://app.techweb.com.cn/wp/2016-10-24/2418646.shtml

  7. throw跟throws关键字

    throws关键字 定义一个方法的时候可以使用throws关键字声明.使用throws关键字声明的方法表示此方法不处理异常,而交给方法调用处进行处理. throws关键字格式: public 返回值类 ...

  8. FusionCharts或其它flash的div图层总是浮在最上层? (转)

    div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上. 由于FusionCharts的图表都放在div中,如果页面还有其他的div,将 ...

  9. TeeChart控件的安装与常用 功能设置

    TeeChart控件的安装 TeeChart 7.0 With Source在Delphi 7.0中的安装 一.删除Delphi7自带TeeChart  1.Component -> insta ...

  10. Silverlight中使用MVVM:DataGrid中触发Button的Click事件

    方法1.使用RelativeSource向上查找DataContext中的命令,但是需要注意的是命令绑定需要写全 类似: DataContext.ReLoadCommand<Button Gri ...