如何使用 Javascript/CSS 创建开/关开关？
[英]How to create an on/off switch with Javascript/CSS?
问题描述
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?知道如何做到这一点吗？
7 个解决方案
解决方案1
44 2012-10-16 06:35:05
check out this generator: On/Off FlipSwitch看看这个发生器：开/关 FlipSwitch
you can get various different style outcomes and its css only - no javascript!你可以得到各种不同风格的结果，只有它的 css - 没有 javascript！
解决方案2
37 已采纳 2009-12-24 09:07:36
You mean something like IPhone checkboxes?你的意思是像 iPhone 复选框？ Try Thomas Reynolds' iOS Checkboxes script:试试Thomas Reynolds 的 iOS Checkboxes 脚本：
Once the files are available to your site, activating the script is very easy:
...
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
Results:结果：
解决方案3
17 2009-12-24 09:03:31
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 toggle function, or using the toggleClass function 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/
解决方案4
8 2013-03-01 15:11:28
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 or checkboxes as switches.它使用无线电类型或复选框作为开关。 A type attribute has been added since V.1.8.从 V.1.8 开始添加了type属性。
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 issues as pointed by many people.我现在不建议使用那些旧的 Switch 按钮，因为它们似乎总是受到许多人指出的可用性问题的困扰。
Please consider having a look at modern Switches like those .请考虑看看 像那些现代交换机。
解决方案5
8 2016-01-02 04:03:47
You can achieve this using HTML and CSS and convert a checkbox into a HTML Switch.您可以使用 HTML 和 CSS 实现这一点，并将复选框转换为 HTML 开关。
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; } <div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div>解决方案6
5 2009-12-24 09:04:30
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;在一类样式中，将“left”设置为0，“right”保持默认； for the other class, do the opposite:对于另一个类，做相反的事情：
<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.或者，只需为“开”和“关”状态设置背景图像，这比定位定位要容易得多。
解决方案7
0 2016-10-25 07:16:50
You can take a look at Shield UI's Switch widget .您可以查看 Shield UI 的Switch 小部件。 It is as easy to use as this:使用起来很简单：
<input id="switch3" type="checkbox" value="" />
<script>
jQuery(function ($) {
$("#switch3").shieldSwitch({
onText: "Yes, save it",
ffText: "No, delete it",
cls: "large"
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.