javascript - Bootstrap Three State Switch - Stack Overflow

admin管理员组

文章数量:1336660

I'm using bootstrap 2.3.2 with bootstrap switch. Two state switch works well, but now I need a three state switch (true, null, false). Is it possible, using bootstrap switch, to make something like this? Maybe using radio buttons instead of a checkbox... I'm using angularJS too so I'll need I directive.

I'm using bootstrap 2.3.2 with bootstrap switch. Two state switch works well, but now I need a three state switch (true, null, false). Is it possible, using bootstrap switch, to make something like this? Maybe using radio buttons instead of a checkbox... I'm using angularJS too so I'll need I directive.

• javascript
• angularjs
• twitter-bootstrap
• twitter-bootstrap-2

Share Improve this question Follow edited Jun 30, 2015 at 6:56 Siguza 23.9k66 gold badges5555 silver badges9898 bronze badges asked Apr 16, 2014 at 9:55 gbosgbos 58022 gold badges99 silver badges3434 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I have improved upon the answer above and created a JSFiddle that demonstrates a fully functional three state switch. Please note that the javascript window in JSfiddle was not working properly so the script is loaded in the html window.

https://jsfiddle/buzzyearlight/u7sg8oLa/

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

Instead of using radio buttons this switch utilizes a range and passes the value into JavaScript to determine the actions of the switch. The biggest hurdle in designing this was changing the pseudo element of the range (specifically the background color of its track). This can be achieved by setting different classes with pseduo elements and using java to rotate through the classes.

Information on modifying pseudo elements can be found in the link below. I used method 1 described in the article.

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

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

This certainly is possible to create a UI ponent that can toggle between 3 states, it is just a matter of deciding how you want the UI to look/feel/act.

1. I would start off by creating a directive that handles a click event that toggles through the states as you click (named something like threeStateBool)
2. Initially it would just show the strings true false and null to prove that it works
3. Then decide how you want it to look, the first thought that came to mind would be to use font awesome's ability to stack icons (link) to create the 3 states

Have a look @Three State Switch. Gist Here

You can have something like;

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

本文标签： javascriptBootstrap Three State SwitchStack Overflow