我正在尝试创建一个 CSS/Angular 版本的 http://www.givainc.com/labs/ibutton_jquery_plugin.htm
我的目标是通过调整左边距完全隐藏绿色或红色部分,并且只保持容器宽度足以显示 1。当我调整 slideToggle 容器的宽度时,我似乎无法阻止红色部分环绕。
<div class="slideToggle" ng-click="toggle" name="active" onlabel="Active" offlabel="Inactive" style="height: 34px; width: 115px;">
<input type="checkbox">
<span class="stOn" style="width: 50px;">Active</span>
<span class="stHandle">| | |</span>
<span class="stOff">Inactive</span>
</div>
这是我的 CSS(只发布因为 SO 需要它)
.slideToggle {
cursor: pointer;
overflow: hidden;
white-space: nowrap;
}
.slideToggle > input[type=checkbox] {
display: none;
}
.slideToggle > .stOff,
.slideToggle > .stOn {
float: left;
height: 22px;
padding: 4px 10px 0;
color: #fff;
text-align: center;
white-space: nowrap;
font-size: 11px;
line-height: 18px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px #808080;
}
.stHandle {;
float: left;
min-width: 25px;
background: linear-gradient(to bottom, #fdfdfd 0%,#ebebeb 99%);
padding: 2px 1px 2px 0;
border: 1px solid #8f8f8f;
border-radius: 3px;
color: #c6c6c6;
letter-spacing: -1px;
text-align: center;
}
.slideToggle > .stOn {
float: left;
margin-right: -1px;
background: linear-gradient(to bottom, #8ab056 0%,#a2c46b 100%);
border: 1px solid #88a75c;
border-right: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.slideToggle > .stOff {
float: left;
margin-left: -1px;
background: linear-gradient(to bottom, #d4786a 0%,#e39080 100%);
border: 1px solid #bd6e61;
border-left: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.slideToggle > .stOff::after {
content: "";
clear: both;
}
最佳答案
我的建议是调整您的 HTML 布局。由于我们正在尝试创建滑动效果,为什么不设置您的 HTML 以实际滑动您的按钮内容。使用 overflow: hidden;
来隐藏你不需要的任何额外内容。这还允许您设置非常具体的宽度和高度以帮助保持一致性。
我们将使用容器来指定按钮的总宽度和高度以及事件或非事件范围。然后我们将使用另一个容器来容纳所有 3 个跨度的总宽度。然后我们所要做的就是将 margin-left:
添加到第二个容器中,使其在第一个容器中“滑动”。 Overflow:hidden;
是我们真正的冠军。
这是一个 JSFiddle,我在其中包含了一些示例 jquery 来证明它的工作原理。您将需要调整代码以匹配您的复选框要求等。如果您认为 jquery 是更好的解决方案,请随意使用 jquery。
HTML:
<div class="container">
<div id="button-container" class="">
<span class="red">Inactive</span>
<span id="button" class="button"> | | | </span>
<span class="green">Active</span>
</div>
</div>
CSS:
.container {
width: 100px;
height: 40px;
background: orange;
overflow: hidden;
}
#button-container {
width: 170px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.active {
margin-left: -70px;
}
.red, .button, .green {
display: block;
height: 20px;
float: left;
}
.red, .green {
width: 50px;
padding: 10px;
}
.button {
text-align: center;
width: 30px;
background: #ccc;
padding: 10px 0;
cursor: pointer;
}
.red {
background: red;
}
.green {
background: green;
}
关于css - 使用 div 作为其中 float 元素的视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18359221/