基于Bootstrap的jQuery开关按钮组合
Bootstrap是一款由Twitter推出的开源前端开发包，功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的，看了按钮的主题样式，也都是Bootstrap的样式风格，比较清新和简单。这款jQuery开关按钮可以满足你不同的应用需求，包括样式、大小等。
实现的代码。
html代码：
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<h2 class="h4">State</h2>
<p>
<input id="switch-state" type="checkbox" checked>
</p>
<div class="btn-group">
<button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
<button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
<button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
<button type="button" data-switch-get="state" class="btn btn-default">Get</button>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Size</h2>
<p>
<input id="switch-size" type="checkbox" checked data-size="mini">
</p>
<div class="btn-group">
<button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
<button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
<button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
<button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
<button type="button" data-switch-get="size" class="btn btn-default">Get</button>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Animate</h2>
<p>
<input id="switch-animate" type="checkbox" checked>
</p>
<p>
<button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Disabled</h2>
<p>
<input id="switch-disabled" type="checkbox" checked disabled>
</p>
<p>
<button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Readonly</h2>
<p>
<input id="switch-readonly" type="checkbox" checked readonly>
</p>
<p>
<button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Indeterminate</h2>
<p>
<input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
</p>
<p>
<button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Inverse</h2>
<p>
<input id="switch-inverse" type="checkbox" checked data-inverse="true">
</p>
<p>
<button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
<button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">On Color</h2>
<p>
<input id="switch-onColor" type="checkbox" checked data-on-color="info">
</p>
<p class="btn-group">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
<li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
<li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
<li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
<li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
</div>
</div>
<button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Off Color</h2>
<p>
<input id="switch-offColor" type="checkbox" data-off-color="warning">
</p>
<p class="btn-group">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
<li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
<li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
<li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
<li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
</div>
</div>
<button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
</p>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">On Text</h2>
<p>
<input id="switch-onText" type="checkbox" checked data-on-text="Yes">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Off Text</h2>
<p>
<input id="switch-offText" type="checkbox" data-off-text="No">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="offText" value="No" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Label Text</h2>
<p>
<input id="switch-labelText" type="checkbox" data-label-text="Label">
</p>
<div class="row">
<div class="col-sm-6">
<input type="text" data-switch-set-value="labelText" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Handle Width</h2>
<p>
<input id="switch-handleWidth" type="checkbox" data-handle-width="100">
</p>
<div class="row">
<div class="col-sm-6">
<input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Label Width</h2>
<p>
<input id="switch-labelWidth" type="checkbox" data-label-width="100">
</p>
<div class="row">
<div class="col-sm-6">
<input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<h2 class="h4">Create | Destroy</h2>
<p>
<input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>
</p>
<div class="row">
<div class="col-sm-6">
<button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div><br><br>
<div class="text-center">
<h2 class="h4">Radio All Off</h2>
<div class="row">
<div class="col-sm-6">
<h3 class="h5">Disabled</h3>
<input type="radio" name="radio1" checked class="switch-radio1">
<input type="radio" name="radio1" class="switch-radio1">
<input type="radio" name="radio1" class="switch-radio1">
</div>
<div class="col-sm-6">
<h3 class="h5">Enabled</h3>
<input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
<input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
<input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
</div>
</div><br>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<hr>
<h2 class="h4">在模态窗口中显示</h2>
<button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
<div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div id="modal-switch-label" class="modal-title">Title</div>
</div>
<div class="modal-body">
<input id="switch-modal" type="checkbox" checked>
</div>
</div>
</div>
</div>
</div>
</div>
via：http://www.w2bc.com/Article/20900
基于Bootstrap的jQuery开关按钮组合的更多相关文章
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 基于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使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
- Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...
- 基于Bootstrap、Jquery的自适应导航栏
css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...
- 弹出框一 之 基于bootstrap和jquery的自定义弹出框
(function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...
- 基于Bootstrap的jQuery登录表单
在线演示 本地下载
随机推荐
- Coffee Script 笔记 1
安装node 虽然官网提供了单文件bin的版本 但是并不知道怎么安装npm 于是乎还是得安装msi (坑 当使用 coffee -w -c . 监视文件改变 即时编译的时候会 提示 Error: T ...
- nodejs save遇到的一个坑
混合类型因为没有特定约束,因此可以任意修改,一旦修改了原型,则必须 调用markModified() >>> person.anything = {x:[3,4,{y:'change ...
- Netbeans Platform 工程，免安装JDK
使用Netbeans 6.8 创建了一个Netbeans Platform 工程,以Zip形式发布后, 按照以下操作,可 以在客户端免安装JDK: 1. 从已安装JDK的计算机中,提取JDK:eg. ...
- sql中获得时间的参数
(----我错了,以下非php.php用例:FORM_UNIXTIME($time, '%H')取小时数.---) 返回表示指定日期的指定日期部分的整数. 语法 DATEPART ( datepart ...
- My集合框架第六弹 左式堆
左式堆(Leftist Heaps)又称作最左堆.左倾堆.左式堆作为堆的一种,保留了堆的一些属性. 第1,左式堆仍然以二叉树的形式构建: 第2,左式堆的任意结点的值比其子树任意结点值均小(最小堆的特性 ...
- [OAuth2 & OpenID] 1.OAuth2授权
1 OAuth2解决什么问题的? 举个栗子先.小明在QQ空间积攒了多年的照片,想挑选一些照片来打印出来.然后小明在找到一家提供在线打印并且包邮的网站(我们叫它PP吧(Print Photo缩写
- hibernate的配置文件
- java中final的用法
final从字面翻译来看,有最后的,最终的; 决定性的; 不可更改的等含义,在java里面主要还是“不可改变的”这层意思,不可改变或者不想改变的final主要用在类.方法.数据这三个方面. 一.f ...
- thinkphp 3+ 观后详解 (4)
static public function run() { // 应用初始化标签 Hook::listen('app_init'); App::init(); // 应用开始标签 Hook::lis ...
- URAL 1233 - Amusing Numbers
首先计算出k至少为第几位,如果m小于这个数,那么输出0 还有一种情况, 就是10的i次方的这种情况,如果i+1等于m,那么直接输出k,否则输出0 其他的情况,就是二分,然后判断计算其插入到k之前的数的 ...