Proto.io 提供了一个非常好的使用 CSS 实现开关按钮的解决方案。然而,它在 IE8 中不起作用。 http://proto.io/freebies/onoff/
有人知道如何使用 JavaScript 解决它吗?或者您有其他推荐的开关按钮解决方案,可以在 IE8 中使用吗?
Proto.io 提供了一个非常好的使用 CSS 实现开关按钮的解决方案。然而,它在 IE8 中不起作用。 http://proto.io/freebies/onoff/
有人知道如何使用 JavaScript 解决它吗?或者您有其他推荐的开关按钮解决方案,可以在 IE8 中使用吗?
感谢使用我们的Proto.io翻转开关 :)
以下是如何使用JavaScript启用IE8支持的方法。
您需要添加CSS以根据“onoffswitch-checked”类更改翻转开关的状态,然后使用JavaScript切换该类以在单击翻转开关时进行切换。
首先在CSS中添加这两个声明:
.onoffswitch-checked .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checked .onoffswitch-switch {
right: 0px;
}
然后,使用JavaScript根据复选框是否被选中来切换“onoffswitch-checked”类:
接下来的JavaScript代码可以实现这个功能:
$(document).ready(function(){
$('.onoffswitch-label').click(function(){
$(this).parent().toggleClass('onoffswitch-checked');
});
});
另外,如果你已经选择了“默认开启”选项,请确保将“onoffswitch-checked”类添加到你的HTML中:
Also, 如果你已经选择了“Switch ON by default”选项,请确保将“onoffswitch-checked”类添加到你的HTML中:
<div class="onoffswitch onoffswitch-checked">
注:
有一种稍微更简洁的方法,可以使用复选框上的change()事件来代替标签上的click()事件,但不幸的是,在IE8中,当点击标签而不是复选框时,change()事件不会被触发。
在复选框上触发选中的类别(checked class)比在父元素上更好,但是,当一个类别(class)改变时,IE8不会刷新相邻兄弟元素CSS(+):(