我有一个已编码的切换按钮,但我不认为它在我的表单中使用很好,因为它是一个非常糟糕的hacky代码,可以选择任一选项。
是否有更好/更有效的方法来编码此切换按钮?我对jQuery并不擅长,所以对提供的功能的任何帮助都会有所帮助。
如果还有一种编程方式可以向左/向右滑动切换,而不是左/右点击也很棒。
我还附上了这些图像,以显示它应该如何运作的行为:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
有任何问题,请问......
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>
答案 0 :(得分:1)
纯CSS版本:
在以下代码段中,有一个隐藏的复选框,当点击label
中的内容时,该复选框会被选中/取消选中。使用CSS :checked
选择器,#background
位置已从0%
更改为50%
,并且其颜色从红色变为蓝色。
背景与文字分开,并设置为position:absolute
(易于移动)加z-index:-1
(将其带到字幕后面)。 transition
上添加的CSS #background
会动画显示其位置/颜色的变化。
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
&#13;
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>
&#13;
答案 1 :(得分:0)
答案 2 :(得分:0)
你可以在纯css中完成这个,但是因为你要求jQuery ......
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>