[英]How to create an on/off switch with Javascript/CSS?
我想要一个滑动开关。 左边是关，右边是开。 当用户切换开关时，我希望“滑块”部分滑动到另一侧并指示它已关闭。 然后我可以有一个回调，将切换开关的状态作为输入，以便我可以采取相应的行动。
知道如何做到这一点吗？
看看这个发生器：开/关 FlipSwitch
你可以得到各种不同风格的结果，只有它的 css - 没有 javascript！
你的意思是像 iPhone 复选框？ 试试Thomas Reynolds 的 iOS Checkboxes 脚本：
一旦文件可用于您的站点，激活脚本非常简单：
...
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
结果：
使用普通的 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>
使用 jQuery
如果你使用 jQuery，你可以使用toggle函数，或者使用 click 事件处理程序中的toggleClass函数，像这样：
$(document).ready(function(){
$('a#myButton').click(function(){
$(this).toggleClass("btnClicked");
});
});
使用 jQuery UI 效果，您可以为过渡设置动画： http : //jqueryui.com/demos/toggleClass/
如果您不介意与 Bootstrap 相关的内容，可以使用一个出色的（非官方的） Bootstrap Switch 。
它使用无线电类型或复选框作为开关。 从 V.1.8 开始添加了type属性。
源代码可在 Github 上获得。
我现在不建议使用那些旧的 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>轮廓：创建两个元素：一个滑块/开关和一个作为滑块父级的槽。 要切换状态，请在“开”和“关”类之间切换滑块元素。 在一类样式中，将“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>
或者，只需为“开”和“关”状态设置背景图像，这比定位定位要容易得多。
您可以查看 Shield UI 的Switch 小部件。 使用起来很简单：
<input id="switch3" type="checkbox" value="" />
<script>
jQuery(function ($) {
$("#switch3").shieldSwitch({
onText: "Yes, save it",
ffText: "No, delete it",
cls: "large"
});
});
</script>
如何从 javascript 中的“开启”阵列和“关闭”阵列创建“开启”阵列
[英]How to create a “on” array from a “switch on” array and “switch off” array in javascript
如果在 javascript 中拨动开关，则关闭 css 微调器
[英]turn off css spinner if toggle switch is flicked off in javascript
如何仅针对 Internet Explorer 7 以编程方式关闭 JavaScript？
[英]How to switch off JavaScript programmatically only for Internet Explorer 7?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.