如何使用 Javascript/CSS 创建开/关开关？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1957466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an on/off switch with Javascript/CSS?
提问by esac
I want to have a sliding switch. On the left would be Off and on the right would be On. When the user toggles the switch, I want the 'slider' portion to slide to the other side and indicate it is off. I could then have a callback that takes as input the state of the toggle switch so I can act accordingly.
我想要一个滑动开关。左边是关，右边是开。当用户切换开关时，我希望“滑块”部分滑动到另一侧并指示它已关闭。然后我可以有一个回调，将切换开关的状态作为输入，以便我可以采取相应的行动。
Any idea how to do this?
知道如何做到这一点吗？
采纳答案by Alex Reitbort
You mean something like IPhone checkboxes? Try Thomas Reynolds' iOS Checkboxes script:
你的意思是像 iPhone 复选框？试试Thomas Reynolds 的 iOS Checkboxes 脚本：
Once the files are available to your site, activating the script is very easy:
...
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
一旦文件可用于您的站点，激活脚本非常简单：
...
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
Results:
结果：
回答by anna.mi
check out this generator: On/Off FlipSwitch
看看这个发生器：开/关 FlipSwitch
you can get various different style outcomes and its css only - no javascript!
你可以得到各种不同风格的结果，只有它的 css - 没有 javascript！
回答by Groo
Using plain javascript
使用普通的 javascript
<html>
<head>
<!-- define on/off styles -->
<style type="text/css">
.on { background:blue; }
.off { background:red; }
</style>
<!-- define the toggle function -->
<script language="javascript">
function toggleState(item){
if(item.className == "on") {
item.className="off";
} else {
item.className="on";
}
}
</script>
</head>
<body>
<!-- call 'toggleState' whenever clicked -->
<input type="button" id="btn" value="button"
class="off" onclick="toggleState(this)" />
</body>
</html>
Using jQuery
使用 jQuery
If you use jQuery, you can do it using the togglefunction, or using the toggleClassfunction inside click event handler, like this:
如果你使用 jQuery，你可以使用toggle函数，或者使用click 事件处理程序中的toggleClass函数，像这样：
$(document).ready(function(){
$('a#myButton').click(function(){
$(this).toggleClass("btnClicked");
});
});
Using jQuery UI effects, you can animate transitions: http://jqueryui.com/demos/toggleClass/
使用 jQuery UI 效果，您可以为过渡设置动画：http: //jqueryui.com/demos/toggleClass/
回答by smonff
Initial answer from 2013
2013 年的初步回答
If you don't mind something related to Bootstrap, an excellent (unofficial) Bootstrap Switch is available.
如果您不介意与 Bootstrap 相关的内容，可以使用一个出色的（非官方的）Bootstrap Switch。
It uses radio types orcheckboxes as switches. A typeattribute has been added since V.1.8.
它使用无线电类型或复选框作为开关。type从 V.1.8 开始添加了一个属性。
Source code is available on Github.
源代码可在 Github 上获得。
Note from 2018
2018 年的笔记
I would not recommend to use those kind of old Switch buttons now, as they always seemed to suffer of usability issuesas pointed by many people.
我现在不建议使用那些旧的 Switch 按钮，因为它们似乎总是受到许多人指出的可用性问题的困扰。
Please consider having a look at modern Switches like those.
请考虑看看像那些现代交换机。
回答by Sajeev C
You can achieve this using HTML and CSS and convert a checkbox into a HTML Switch.
您可以使用 HTML 和 CSS 实现这一点，并将复选框转换为 HTML 开关。
HTML
HTML
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1"></label>
</div>
CSS
CSS
input.cmn-toggle-round + label {
padding: 2px;
width: 100px;
height: 30px;
background-color: #dddddd;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 40px;
background-color: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: margin 0.4s;
-moz-transition: margin 0.4s;
-o-transition: margin 0.4s;
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
margin-left: 60px;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
回答by outis
Outline: Create two elements: a slider/switch and a trough as a parent of the slider. To toggle the state, switch the slider element between an "on" and an "off" class. In the style for one class, set "left" to 0 and leave "right" the default; for the other class, do the opposite:
轮廓：创建两个元素：一个滑块/开关和一个作为滑块父级的槽。要切换状态，请在“开”和“关”类之间切换滑块元素。在一类样式中，将“left”设置为0，“right”保持默认；对于另一个类，做相反的事情：
<style type="text/css">
.toggleSwitch {
width: ...;
height: ...;
/* add other styling as appropriate to position element */
position: relative;
}
.slider {
background-image: url(...);
position: absolute;
width: ...;
height: ...;
}
.slider.on {
right: 0;
}
.slider.off {
left: 0;
}
</style>
<script type="text/javascript">
function replaceClass(elt, oldClass, newClass) {
var oldRE = RegExp('\b'+oldClass+'\b');
elt.className = elt.className.replace(oldRE, newClass);
}
function toggle(elt, on, off) {
var onRE = RegExp('\b'+on+'\b');
if (onRE.test(elt.className)) {
elt.className = elt.className.replace(onRE, off);
} else {
replaceClass(elt, off, on);
}
}
</script>
...
<div class="toggleSwitch" onclick="toggle(this.firstChild, 'on', 'off');"><div class="slider off" /></div>
Alternatively, just set the background image for the "on" and "off" states, which is a much easier approach than mucking about with positioning.
或者，只需将背景图像设置为“开”和“关”状态，这比解决定位问题要容易得多。
回答by Vladimir Georgiev
You can take a look at Shield UI's Switch widget. It is as easy to use as this:
您可以查看 Shield UI 的Switch 小部件。使用起来很简单：
<input id="switch3" type="checkbox" value="" />
<script type="text/javascript">
jQuery(function ($) {
$("#switch3").shieldSwitch({
onText: "Yes, save it",
ffText: "No, delete it",
cls: "large"
});
</script>
