javascript - 自举三态开关

Question

我正在使用带有 Bootstrap 开关的 Bootstrap 2.3.2。两种状态开关效果很好，但现在我需要一个三态开关(true、null、false)。是否有可能使用 Bootstrap 开关来制作这样的东西？也许使用单选按钮而不是复选框......我也在使用 angularJS，所以我需要 I 指令。

Answer 1

我改进了上面的答案并创建了一个 JSFiddle，它演示了一个功能齐全的三态开关。请注意，JSfiddle 中的 javascript 窗口无法正常工作，因此脚本在 html 窗口中加载。

https://jsfiddle.net/buzzyearlight/u7sg8oLa/

<script async src="//jsfiddle.net/buzzyearlight/u7sg8oLa/embed/"></script>

此开关不使用单选按钮，而是使用范围并将值传递到 JavaScript 以确定开关的操作。设计这个的最大障碍是更改范围的伪元素(特别是其轨道的背景颜色)。这可以通过使用 pseduo 元素设置不同的类并使用 java 轮换类来实现。

关于修改伪元素的信息可以在下面的链接中找到。我使用了文章中描述的方法 1。

http://pankajparashar.com/posts/modify-pseudo-elements-css/