Bootstarp风格的toggle效果分享

前端技术 2023/09/04 JavaScript

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


我知道这个效果在 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；

本文地址：https://www.stayed.cn/item/11325

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案