bootstarp风格的toggle效果分享
最近在写项目的时候想要一个这样的效果:
我知道这个效果在 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 ;
overflow: hidden;
*zoom: ;
display: inline-block;
zoom: ;
*display: inline;
-webkit-transition: .25s;
-moz-transition: .25s;
-o-transition: .25s;
transition: .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: ;
color: white;
left: ;
margin-left: .5px;
margin-right: -13px;
z-index: ;
} .toggle.toggle-off .toggle-radio:first-child {
left: -%;
} .toggle .toggle-radio {
/*background: url("../images/icon-on.png") right top no-repeat;*/
color: #0275d8;
display: block;
font-weight: ;
height: 21px;
left: %;
margin-left: -13px;
padding: 5px 32px 3px;
position: relative;
text-align: center;
z-index: ;
-webkit-transition: .25s;
-moz-transition: .25s;
-o-transition: .25s;
transition: .25s;
-webkit-backface-visibility: hidden;
} .toggle .toggle-radio:first-child {
margin-bottom: -29px;
left: ;
} .toggle input {
display: none;
position: absolute;
outline: none !important;
display: block\;
opacity: 0.01;
filter: alpha(opacity=);
zoom: ;
} .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: ;
} .toggle.toggle-icon .toggle-radio {
/*background-image: url("../images/block-on.png");*/
background-position: 62px ;
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().is(":checked")) {
$(toggle).removeClass("toggle-off");
} else {
$(toggle).addClass("toggle-off");
}
}; checkToggleState(); radio.eq().click(function() {
$(toggle).toggleClass("toggle-off");
}); radio.eq().click(function() {
$(toggle).toggleClass("toggle-off");
});
}; $(".toggle").each(function(index, toggle) {
toggleHandler(toggle);
});
</script>
</body>
</html>
整体的效果是依赖于jQuery， 当用户点击了label按钮会触发input的click事件， 然后判断给父级添加不同的classname；
相关：
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329
bootstarp风格的toggle效果分享的更多相关文章
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 只用css3实现菜单的toggle效果
一.原理: 使用label与input来实现,label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框. 如果我们需要让菜单默认显示, ...
- 手动实现jQuery的toggle()效果
有时候我们希望实现toggle()切换效果,但是切换的同时需要完成一些其他要做的事情.所以我们需要对jQuery的toggle()函数进行改造. 下面好test2()函数就是一个实现toggle效果的 ...
- 前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 工作需求——JQ小效果分享下
一.文字索引效果展示: html布局代码 <ul class="n_areaList"> <li> <h5>当前选择区域</h5> ...
- js惊奇效果分享，和排序算法
分享地址:http://www.cnblogs.com/lhb25/p/8-amazing-codepen-demos.html 排序算法分享地址:http://www.w3cplus.com/js/ ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
随机推荐
- BeJavaGod - 如何正确使用数据字典进行分类统一操作（一）
先说说什么是数据字典,这个玩意一般不太会解释,举个栗子吧~ 每个系统都会有用户表,性别:男(1)女(0) 另外我们做物流的会涉及到车型:卡车(1),轿车(2),挂车(3) 货物类型:危险品(1),普通 ...
- NOIP2012借教室[线段树｜离线 差分 二分答案]
题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要 向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自 ...
- 维护MMO项目的随想
前提条件 近期我的工作内容是在维护一个历经几年的MMORPG大型项目,写下自己的一些感想 项目进度:游戏中基本的系统功能都有了,现阶段的主要工作就是修复系统的bug及重构部分系统. 维护老项目从何开始 ...
- BeanShell Assertion in Jmeter
以下为几个beanshell assertion的栗子: if (ResponseCode != null && ResponseCode.equals ("200" ...
- poj2531 Network Saboteur
Network Saboteur Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11122 Accepted: 5372 ...
- Screen 对象
Screen 对象 Screen 对象 Screen 对象包含有关客户端显示屏幕的信息. 注意: 没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象. Screen 对象属性 属性 ...
- Tomcat 开启 SSL
生成keystore /usr/java/default/bin/keytool -genkey -alias tomcat -keyalg RSA -keystore ~/tomcat.keysto ...
- 傻瓜看完都可以简单使用Git
作为当下最流行的版本控制系统,Git是一个分布式版本控制系统,跟SVN等集中式版本控制有很多使用上的不同.万事开头难,想要最快学会使用Git,最简单的就是下了客户端就直接去用,一边用一边学.本文手把手 ...
- Servlet学习之web服务器Tomcat 详解
Web服务器是什么 Web服务器是指驻留于因特网上某种类型计算机的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处理该请求并将文件发送到该浏览器上,附带的信息会告诉浏览器如何查看该文 ...
- Expression Blend4经验分享：制作一个简单的文字按钮样式
首先在Grid里放一个TextBlock,对象时间线窗口的结构树如下 右键点击grid,选择构成控件 会弹出构成控件的对话框,选择你要构成的控件类型,控件名称,控件样式存储位置 这里我们选择butto ...