Question

我正在使用带有自举开关的bootstrap 2.3.2。两个状态开关运行良好，但现在我需要一个三态开关（true，null，false）。是否可以使用自举开关制作这样的东西？也许使用单选按钮而不是复选框... 我也在使用angularJS，所以我需要指令。

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/

Answer 2

<p class="range-field" style=" width:60px">
<input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" 
    min="1" class="rangeAll" max="3" value="2">

function filterme（val）{

if (val == 1) {
    $('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive');
    $("span").text("Active");
} else if (val == 2) {
    $('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll');
    $("span").text("All");
} else if (val == 3) {
    $('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive');
    $("span").text("Passive");
}

}

        /* input range css .... */----------/* Crome*/
        .rangeActive::-webkit-slider-thumb { background-color: #4caf50 !important;}
        .rangeAll::-webkit-slider-thumb { background-color: #6F6F6F !important;}
        .rangePassive::-webkit-slider-thumb { background-color: #C94553 !important;}

        /* Mozilla*/
        .rangeActive::-moz-range-thumb { background-color: #4caf50 !important;}
        .rangeAll::-moz-range-thumb { background-color: #6F6F6F !important;}
        .rangePassive::-moz-range-thumb { background-color: #C94553 !important;}

        /* IE and Ms Edge*/
        input[type=range]::-ms-track{ border: 10px solid #E1E1E1;border-radius: 12px;}
        input[type=range]::-ms-tooltip{display:none !important;}

Answer 3

这当然可以创建一个可以在3种状态之间切换的UI组件，这只是决定你希望UI看起来/感觉/行动的方式。

我首先要创建一个处理点击事件的指令，点击事件在点击时切换状态（命名为threeStateBool）
最初只显示字符串true false和null以证明其有效
然后决定你想要它的样子，首先想到的是使用字体真棒的能力来叠加图标（link）以创建3个状态

Answer 4

看看@ Three State Switch。 Gist Here

你可以拥有类似的东西;

<p class="range-field" style=" width:60px">
    <input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" 
        min="1" class="rangeAll" max="3" value="2">
</p>


function filterme(val) {
    if (val == 1) {
        $('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive');
        $("span").text("Active");
    } else if (val == 2) {
        $('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll');
        $("span").text("All");
    } else if (val == 3) {
        $('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive');
        $("span").text("Passive");
    }
}

Bootstrap三态开关

4 个答案: