如何用Javascript/CSS创建一个开/关开关？
esa*_*sac 41 html javascript css
我想要一个滑动开关.左边是Off,右边是On.当用户切换开关时,我希望"滑块"部分滑到另一侧并指示它已关闭.然后我可以有一个回调,它将切换开关的状态作为输入,这样我就可以采取相应的行动.
知道怎么做吗？
Ale*_*ort 37
你的意思是IPhone复选框？试试Thomas Reynolds的iOS Checkboxes脚本:
一旦文件可供您的站点使用,激活脚本非常简单:
...
Run Code Online (Sandbox Code Playgroud)$(document).ready(function() { $(':checkbox').iphoneStyle(); });
结果:
- http://proto.io/freebies/onoff/ - 用于生成带有动画过渡的纯CSS3 On/Off翻转开关的服务. (7认同)
- 值得注意的是,它不是**免费用于商业用途. (7认同)
Gro*_*roo 17
使用普通的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/
2013年的初步答案
如果你不介意与Bootstrap相关的东西,可以使用一个优秀的(非官方的)Bootstrap Switch.
它使用无线电类型或复选框作为开关.type自V.1.8起添加了一个属性.
源代码可在Github上找到.
2018年的注释
我不建议现在使用那种旧的Switch按钮,因为他们总是看起来像许多人所指出的可用性问题.
请考虑一下这些现代开关.
- 该链接重定向到http://bootstrap-switch.org/,无法加载.使用http://www.bootstrap-switch.org/(带有www;感谢SO在视觉上隐藏了我的链接中的www)而不是加载. (2认同)
您可以使用HTML和CSS实现此目的,并将复选框转换为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;
}
大纲:创建两个元素:滑块/开关和槽作为滑块的父级.要切换状态,请在"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>
或者,只需将背景图像设置为"开"和"关"状态,这比定位更容易.
| 归档时间： |
|
| 查看次数： |
151288 次 |
| 最近记录： |