如何使用Javascript / CSS创build开/关开关？
我想要一个滑动开关。 左边是Off，右边是On。 当用户切换开关时，我希望“滑块”部分滑动到另一侧并指示closures。 然后，我可以有一个callback，作为input切换开关的状态，所以我可以采取相应的行动。
任何想法如何做到这一点？
你的意思是像iPhonecheckbox？ 试试Thomas Reynolds的iOScheckbox脚本：
一旦文件可用于您的网站，激活脚本是非常简单的：
…
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
结果：
看看这个发生器： 开/关FlipSwitch
你可以得到各种不同的风格的结果，只有CSS – 没有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>
使用jQuery
如果你使用jQuery，你可以使用togglefunction，或使用点击事件处理程序中的toggleClass函数，如下所示：
$(document).ready(function(){ $('a#myButton').click(function(){ $(this).toggleClass("btnClicked"); }); });
使用jQuery UI效果，你可以animation转换： http : //jqueryui.com/demos/toggleClass/
我正在寻找相同的。 如果您使用Bootstrap，则提供一个优秀的（非官方） Bootstrap开关 。
您可以使用HTML和CSS来实现此目的，并将checkbox转换为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
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; }
DEMO
大纲：创build两个元素：滑块/开关和低谷作为滑块的父级。 要切换状态，请在“开”和“关”类之间切换滑块元素。 在一个class的风格中，将“left”设置为0，并将“right”设置为默认值; 对于其他class级，则相反：
<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>
或者，只需将背景图像设置为“开”和“关”状态，这比轻松定位更容易。
proto.io有一个非常好的/closures开关发生器，似乎是高度可定制的。 我可能会用它来做我的项目。
你可以看看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>
