Bootstarp风格的toggle效果分享
更新时间:2016年2月26日 10:04 点击:2008
最近在写项目的时候想要一个这样的效果,
我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;
这个效果依赖html5的transition, 所以浏览器兼容成问题;
从flat-ui中把这个效果的js和html,以及css给拨离出来;
整体的代码如下:
运行下面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <h1> toggle的demo </h1> <style> .toggle { background-color: #8AB9E3; border-radius: 60px; color: white; height: 29px; margin: 5px 12px 12px 0; overflow: hidden; *zoom: 1; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; -webkit-box-sizing: initial } .toggle:before, .toggle:after { display: table; content: ""; } .toggle:after { clear: both; } .toggle.toggle-off { background-color: #cbd2d8; } .toggle.toggle-off .toggle-radio { /*background-image: url("../images/icon-off.png")*/; background-position: 0 0; color: white; left: 0; margin-left: 0.5px; margin-right: -13px; z-index: 1; } .toggle.toggle-off .toggle-radio:first-child { left: -120%; } .toggle .toggle-radio { /*background: url("../images/icon-on.png") right top no-repeat;*/ color: #0275d8; display: block; font-weight: 700; height: 21px; left: 120%; margin-left: -13px; padding: 5px 32px 3px; position: relative; text-align: center; z-index: 2; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; } .toggle .toggle-radio:first-child { margin-bottom: -29px; left: 0; } .toggle input { display: none; position: absolute; outline: none !important; display: block\9; opacity: 0.01; filter: alpha(opacity=1); zoom: 1; } .toggle.toggle-icon { border-radius: 6px 7px 7px 6px; } .toggle.toggle-icon.toggle-off { border-radius: 7px 6px 6px 7px; } .toggle.toggle-icon.toggle-off .toggle-radio { /*background-image: url("../images/block-off.png");*/ background-position: 0 0; } .toggle.toggle-icon .toggle-radio { /*background-image: url("../images/block-on.png");*/ background-position: 62px 0; border-radius: 6px; min-width: 27px; text-align: right; } .toggle.toggle-icon .toggle-radio:first-child { text-align: left; } </style> <div class="toggle pull-left"> <label class="toggle-radio" for="toggleOption2">ON</label> <input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"> <label class="toggle-radio" for="toggleOption1">OFF</label> <input type="radio" name="toggleOptions" id="toggleOption2" value="option2"> </div> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <script> //toggle插件的js代码 var toggleHandler = function(toggle) { var toggle = toggle; var radio = $(toggle).find("input"); var checkToggleState = function() { if (radio.eq(0).is(":checked")) { $(toggle).removeClass("toggle-off"); } else { $(toggle).addClass("toggle-off"); } }; checkToggleState(); radio.eq(0).click(function() { $(toggle).toggleClass("toggle-off"); }); radio.eq(1).click(function() { $(toggle).toggleClass("toggle-off"); }); }; $(".toggle").each(function(index, toggle) { toggleHandler(toggle); }); </script> </body> </html>
整体的效果是依赖于jQuery, 当用户点击了label按钮会触发input的click事件, 然后判断给父级添加不同的classname;
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法,本文一部分针对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识,主要对比说明在Bootstrap开发中用到的这些技术要点,对此文感兴趣的朋友一起学习吧...2016-05-14- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-09-01- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错,需要的朋友可以参考下...2016-09-01- 本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧...2017-05-22
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19