基于Bootstrap的jQuery开关按钮插件
按钮 下载
使用方法
首先要在页面中引入依赖文件: 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开关按钮插件的更多相关文章
- 基于Bootstrap的jQuery开关按钮组合
Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- 基于bootstrap的jQuery多级列表树插件
简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
随机推荐
- 边工作边刷题:70天一遍leetcode: day 83
Find the Duplicate Number 要点:通过Pigeonhole principle对值空间做binary search,具体来说, low,mid,high都是值空间,所以范围是[ ...
- 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 ...
- POJ 3150 Cellular Automaton --矩阵快速幂及优化
题意:给一个环,环上有n块,每块有个值,每一次操作是对每个点,他的值变为原来与他距离不超过d的位置的和,问k(10^7)次操作后每块的值. 解法:一看就要化为矩阵来做,矩阵很好建立,大白书P157页有 ...
- HDU 3600 Simple Puzzle 归并排序 N*N数码问题
先介绍八数码问题: 我们首先从经典的八数码问题入手,即对于八数码问题的任意一个排列是否有解?有解的条件是什么? 我在网上搜了半天,找到一个十分简洁的结论.八数码问题原始状态如下: 1 2 3 4 5 ...
- centos下pip安装mysql_python
今天在使用pip安装mysql_python时,遇到一些问题,现记录下来. 1.执行pip install mysql-python时,报错 Running setup.py egg_info for ...
- win10自动更新彻底关闭
http://app.techweb.com.cn/wp/2016-10-24/2418646.shtml
- throw跟throws关键字
throws关键字 定义一个方法的时候可以使用throws关键字声明.使用throws关键字声明的方法表示此方法不处理异常,而交给方法调用处进行处理. throws关键字格式: public 返回值类 ...
- FusionCharts或其它flash的div图层总是浮在最上层? (转)
div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上. 由于FusionCharts的图表都放在div中,如果页面还有其他的div,将 ...
- TeeChart控件的安装与常用 功能设置
TeeChart控件的安装 TeeChart 7.0 With Source在Delphi 7.0中的安装 一.删除Delphi7自带TeeChart 1.Component -> insta ...
- Silverlight中使用MVVM:DataGrid中触发Button的Click事件
方法1.使用RelativeSource向上查找DataContext中的命令,但是需要注意的是命令绑定需要写全 类似: DataContext.ReLoadCommand<Button Gri ...