使用proto.io在IE8中打开/关闭开关

Question

Proto.io为使用CSS的开/关切换按钮提供了一个非常好的解决方案.但是,它在IE8中不起作用. http://proto.io/freebies/onoff/

任何人都知道如何用js修复它？或者是否有其他开/关开关按钮解决方案,你会建议在IE8中工作？

Answer 1

感谢您使用我们的Proto.io flipswitch :)

以下是如何使用javascript启用对IE8的支持.

您需要做的是添加css,它将根据"onoffswitch-checked"类更改flipswitch的状态,然后在单击flipswitch时使用javascript切换该类.

首先在css中添加这两个声明:

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

然后,使用javascript切换"onoffswitch-checked"类,具体取决于是否选中该复选框:

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

此外,如果您选择了"默认启用"选项,请确保将"onoffswitch-checked"类添加到您的html:

<div class="onoffswitch onoffswitch-checked">

笔记:

使用复选框上的change()事件而不是标签上的click()有一种更简洁的方法来实现这一点,但遗憾的是,当单击标签而不是复选框时,IE8不会触发change()事件.

在复选框上而不是在父项上触发已检查的类也会更好,但是当更改类时,IE8不会刷新相邻的兄弟CSS(+):(