我想有一个滑动开关。左边是关闭,右边是打开。当用户切换开关时,我希望“滑块”部分滑到另一边,并指示它是关闭的。然后我可以有一个回调,它将切换开关的状态作为输入,这样我就可以相应地采取行动。知道怎么做吗
svdrlsy41#
查看此生成器:On/Off FlipSwitch你可以得到各种不同风格的结果和它的css只有-没有JavaScript!
mf98qq942#
你的意思是像iPhone复选框?试试Thomas Reynolds' iOS Checkboxes script:一旦文件可用于您的网站,激活脚本是非常容易的:...
$(document).ready(function() { $(':checkbox').iphoneStyle(); });
字符串结果如下:
的数据
blmhpbnm3#
使用纯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/
wfsdck304#
您可以使用HTML和CSS实现这一点,并将复选框转换为HTML Switch。
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; }
个字符
jq6vz3qz5#
如果你不介意与Bootstrap相关的东西,一个优秀的(非官方的)Bootstrap Switch is available。
的数据它使用radio types * 或 * 复选框作为开关。从V.1.8开始添加了type属性。源代码是available on Github。
type
我不建议现在使用那些旧的Switch按钮,因为它们似乎总是像许多人指出的那样suffer of usability issues。请看modern Switches like those。
的
ecr0jaav6#
大纲:建立两个元素:一个滑块/开关和一个槽作为滑块的父级。要切换状态,请在“on”和“off”类之间切换滑块元素。在一个类的样式中,将“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>
字符串或者,只设置背景图像的“开”和“关”状态,这是一个容易得多的方法比胡乱定位。“
nvbavucw7#
你可以看看Shield UI的Switch widget。它是这样简单易用的:
<input id="switch3" type="checkbox" value="" /> <script> jQuery(function ($) { $("#switch3").shieldSwitch({ onText: "Yes, save it", ffText: "No, delete it", cls: "large" }); }); </script>
7条答案
按热度按时间svdrlsy41#
查看此生成器:On/Off FlipSwitch
你可以得到各种不同风格的结果和它的css只有-没有JavaScript!
mf98qq942#
你的意思是像iPhone复选框?试试Thomas Reynolds' iOS Checkboxes script:
一旦文件可用于您的网站,激活脚本是非常容易的:
...
字符串
结果如下:
的数据
blmhpbnm3#
使用纯JavaScript
字符串
使用jQuery
如果你使用jQuery,你可以使用toggle函数,或者在click事件处理程序中使用toggleClass函数,就像这样:
型
使用jQuery UI效果,您可以动画过渡:http://jqueryui.com/demos/toggleClass/
wfsdck304#
您可以使用HTML和CSS实现这一点,并将复选框转换为HTML Switch。
个字符
jq6vz3qz5#
2013年的初始答案
如果你不介意与Bootstrap相关的东西,一个优秀的(非官方的)Bootstrap Switch is available。
的数据
它使用radio types * 或 * 复选框作为开关。从V.1.8开始添加了
type
属性。源代码是available on Github。
2018年的笔记
我不建议现在使用那些旧的Switch按钮,因为它们似乎总是像许多人指出的那样suffer of usability issues。
请看modern Switches like those。
的
ecr0jaav6#
大纲:建立两个元素:一个滑块/开关和一个槽作为滑块的父级。要切换状态,请在“on”和“off”类之间切换滑块元素。在一个类的样式中,将“left”设置为0,并保留“right”为默认值;对于另一个类,执行相反的操作:
字符串
或者,只设置背景图像的“开”和“关”状态,这是一个容易得多的方法比胡乱定位。“
nvbavucw7#
你可以看看Shield UI的Switch widget。它是这样简单易用的:
字符串