使用proto.io在IE8使开/关切换工作 [英] Make on/off switch work in IE8 using proto.io

问题描述

Proto.io为使用CSS的on / off开关按钮提供了一个非常好的解决方案。但是，它不工作在IE8。
http://proto.io/freebies/onoff/

Proto.io provides a very nice solution for on/off switch button using CSS. However, it doesnt work in IE8. http://proto.io/freebies/onoff/

任何人都知道如何使用js修复它？

Anyone know how to fix it with js? Or is there any other on/off switch button solution that you would recommend that would work in IE8 ?

推荐答案

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

thanks for using our Proto.io flipswitch :)

以下是如何启用支持IE8，使用javascript。

Here's how to enable support for IE8, using javascript.

你需要做的是添加css，它将根据onoffswitch-checked类更改flipswitch的状态，然后切换

What you need to do is add css that will change the state of the flipswitch depending on the "onoffswitch-checked" class, and then toggle that class using javascript whenever the flipswitch is clicked.

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

First add these two declarations in the css:

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

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

然后，使用javascript切换onoffswitch-复选框是否被选中：

Then, use javascript to toggle the "onoffswitch-checked" class depending on whether the checkbox is checked or not:

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

此外，如果选择了默认切换开关选项，请确保添加 onoffswitch-checkedclass to your html：

Also, if you have selected the "Switch ON by default" option, make sure to add the "onoffswitch-checked" class to your html:

<div class="onoffswitch onoffswitch-checked">

注意：

有一个稍微干净的方式来实现这一点使用change（）事件上的复选框，而不是标签上的click（），但不幸的是IE8不触发change（）事件，当标签被点击而不是复选框。

There is a slightly cleaner way to achieve this using the change() event on the checkbox instead of the click() on the label, but unfortunately IE8 does not trigger the change() event when the label is clicked instead of the checkbox.

最好在复选框而不是父对象上触发检查类，但IE8不会刷新相邻的兄弟CSS（+） changed：（

It would also be better to trigger the checked class on the checkbox instead of on the parent, but IE8 does not refresh the adjacent siblings CSS ( + ) when a class is changed :(

这篇关于使用proto.io在IE8使开/关切换工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！