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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
vue路由切换时取消之前的所有请求操作
Sep 01 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
WebQQ最新登陆协议的用法
2014/12/22 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
详解vue中axios的封装
2018/07/18 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
简述DNS进行域名解析的过程
2013/12/02 面试题
销售辞职报告范文
2014/01/12 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
升职演讲稿范文
2014/05/23 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
工程部文员岗位职责
2015/02/04 职场文书