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 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 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
PHP将XML转数组过程详解
2013/11/13 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php之readdir函数用法实例
2014/11/13 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python常用算法学习基础教程
2017/04/13 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python实现函数极小值
2019/07/10 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
名人演讲稿范文
2013/12/28 职场文书
竞选演讲稿范文
2013/12/28 职场文书
开业庆典答谢词
2014/01/18 职场文书
公司司机岗位职责
2014/02/07 职场文书
博士生求职信
2014/07/06 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL