这个开关按钮如何工作的CSS？

Question

任何人都可以解释如何冷开启/关闭开关按钮的工作？ http://proto.io/freebies/onoff/

我想设置预防检查，看看用户是否真的要切换按钮。如

$(document).on('change', '.onoffswitch',function(event){... 

http://jsfiddle.net/aGZ7Y/2/ 

如您所见，更改事件已触发但未停止切换行为。

这只是纯粹的CSS完成。 我甚至不知道为什么单击按钮后会触发更改。 （因为我发现复选框已设置为显示：无）

非常感谢。

Answer 1

您需要的div元素

的change event标签元素上使用点击处理太不在值被改变后被触发，所以它不是可取消的事件。

$(document).on('click', '.onoffswitch-label', function (event) { 
    if (!confirm("sure to switch?")) { 
     return false; 
    } 
}); 

演示：Fiddle

Answer 2

您可以做的事情基本上是删除在触发时进行更改ON/OFF的CSS代码，并将它们添加到您的JQuery代码中。 您已经在JQuery中捕获事件，现在只需从代码中相应地更改CSS即可。

该复选框已被设置为display:none;以隐藏原始复选框（这个丑陋的灰色框带勾号）。 在上顶部（这是对display:none;）我们是“建筑”新的自定义一个...