自舉三態開關

Question

我正在使用帶有引導程序開關的引導程序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">

函數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外觀/感覺/動作的方式。

1. 首先，我將創建一個處理點擊事件的指令，該指令可在您單擊時切換狀態（命名為threeStateBool之類的東西）
2. 最初，它將只顯示字符串true false和null來證明它有效
3. 然后決定您的外觀，首先想到的是使用超棒的字體堆疊圖標（ 鏈接 ）的功能來創建3種狀態

Answer 4

看看@ 三態開關 。 要點在這里

你可以有類似的東西；

<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");
    }
}