Bootstarp风格的toggle效果分享


Posted in Javascript onFebruary 23, 2016

 最近在写项目的时候想要一个这样的效果,

Bootstarp风格的toggle效果分享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 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;

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JavaScript实现区块链
Mar 14 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
探索node之事件循环的实现
Oct 30 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 #Javascript
Web开发必知Javascript技巧大全
Feb 23 #Javascript
JQUERY表单暂存功能插件分享
Feb 23 #Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php实现zip文件解压操作
2015/11/03 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python中import机制详解
2017/11/14 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
2019广播稿怎么写
2019/04/17 职场文书