Bootstrap-Drei-Zustand-Schalter

Ich bin mit bootstrap 2.3.2 mit der bootstrap-Schalter. Zwei-Staaten-Schalter arbeitet gut, aber jetzt brauche ich eine drei-Zustand-Schalter (true, null, false). Ist es möglich, mit einer bootstrap-Schaltung, um so etwas wie dies? Vielleicht mit Hilfe von radio-buttons statt einer checkbox...
Ich bin mit angularJS zu, so werde ich brauchen, ich Richtlinie.

InformationsquelleAutor Giammarco Boscaro | 2014-04-16
  1. 3

    Habe ich besser auf die obige Antwort und erstellt ein JSFiddle zeigt, dass eine voll funktionsfähige drei-Zustand-Schalter. Bitte beachten Sie, dass die javascript-Fenster in JSfiddle funktionierte nicht richtig, so dass die Skript geladen wird, in das html-Fenster.

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

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

    Statt mit radio-buttons dieser Schalter nutzt eine Reihe und übergibt den Wert in JavaScript zu ermitteln, die Maßnahmen des Schalters. Die größte Hürde bei der Gestaltung dieser war die änderung der pseudo-element des Bereichs (insbesondere die hintergrund-Farbe der Spur). Dies kann erreicht werden durch Einstellung der verschiedenen Klassen mit pseduo-Elemente und mit Hilfe von java zu drehen durch die Klassen.

    Informationen über das ändern der pseudo-Elemente finden Sie im unten aufgeführten link. Ich benutzte Methode 1 im Artikel beschrieben.

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

    InformationsquelleAutor Mark Crawford
  2. 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">

    Funktion 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;}
    InformationsquelleAutor tuncergulcann
  3. 0

    Dies ist sicherlich möglich, erstellen Sie eine UI-Komponente, die können Sie Umschalten zwischen den 3 Staaten, ist es nur eine Frage der Entscheidung, wie Sie möchten, dass die Benutzeroberfläche zu schauen/fühlen/handeln.

    1. Würde ich beginnen, durch die Schaffung einer Richtlinie, die verarbeitet ein click-Ereignis, das schaltet durch die Zustände, wie Sie klicken Sie auf (mit dem Namen etwas wie threeStateBool)
    2. Zunächst es würde nur zeigen, die Saiten true false und null zu beweisen, dass es funktioniert
    3. Dann entscheiden, wie Sie Aussehen soll, der erste Gedanke in den Sinn kam, wäre die Verwendung von font-awesome Fähigkeit, auf stack icons (link) zu erstellen, die 3 Staaten
    InformationsquelleAutor Brocco
  4. -1

    Haben Sie einen Blick @Drei-Zustand-Schalter. Gist Hier

    Können Sie so etwas wie;

    <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");
    }
}
    InformationsquelleAutor tuncergulcann
Schreibe einen Kommentar