Toggle Twitter Bootstrap Button-Klasse, wenn aktiv

Question

In Twitter-Bootstrap suchte ich nach einer Möglichkeit, eine Schaltfläche die Standardfarbe zu ermöglichen, wenn nicht aktiv. Sobald eine Schaltfläche aktiv ist, wollte ich die Farbe ändern. Ich suchte nach Möglichkeiten, dies mit der bereitgestellten js-Datei zu tun. Ich habe am Ende ein kleines Skript geschrieben, um damit umzugehen.

Answer 1

Durch Hinzufügen von class-toggle als Attribut zu der Schaltfläche gleich, was Sie gehen möchten, sobald die Schaltfläche gedrückt wird und fügen Sie die folgende jQuery, erhalten Sie das oben beschriebene Ergebnis.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() { 

     if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){ 
      var btnGroup = $(this).parent('.btn-group'); 

      if(btnGroup.attr('data-toggle') == 'buttons-radio') { 
       btnGroup.find('.btn').each(function() { 
        $(this).removeClass($(this).attr('class-toggle')); 
       }); 
       $(this).addClass($(this).attr('class-toggle')); 
      } 

      if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') { 
       if($(this).hasClass('active')) { 
        $(this).removeClass($(this).attr('class-toggle')); 
       } else { 
        $(this).addClass($(this).attr('class-toggle')); 
       } 
      } 

      } 


     }); 

Dann würde die Schaltfläche aussieht

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button> 

Wenn Sie es mit einer Knopfgruppe tun, wollen auch sie die gleiche Art und Weise funktionieren. Fügen Sie einfach die class-toggle zu jeder Schaltfläche in der Gruppe hinzu.

The jsfiddle

UPDATE

I geändert und erstellt einen Kern eine bessere Antwort zu haben, wenn Sie Schaltfläche mit einer Klasse starten. Toggle Twitter Bootstrap Classes

UPDATE

ich eine Änderung vorgenommen haben, den Fehler zu beheben, wenn Sie auf einem aktiven Radiobutton klicken erscheint

Find it here

Answer 2

ich Ihren Code bearbeitet haben. Wenn Sie in Ihrem Code auf einen aktiven Status klicken, wird alles durcheinander gebracht. Ich habe eine kleine if-Anweisung hinzugefügt, die dies verhindert. Nur ein Beitrag, wenn Sie den Fix brauchen. Gute Arbeit mit dem Code.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() { 
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse']; 
var $this = $(this); 

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) { 

     var btnGroup = $this.parent('.btn-group'); 
     var btnToggleClass = $this.attr('class-toggle'); 
     var btnCurrentClass = $this.hasAnyClass(buttonClasses); 

     if(btnToggleClass!='false'&&btnToggleClass!='btn') { 

      if (btnGroup.attr('data-toggle') == 'buttons-radio') { 
       var activeButton = btnGroup.find('.btn.active'); 
       var activeBtnClass = activeButton.hasAnyClass(buttonClasses); 

        activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);    
        $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass); 

      } 

      if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') { 
       $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass); 
      } 

     } 


    } 



});  

$.fn.hasAnyClass = function(classesToCheck) { 
    for (var i = 0; i < classesToCheck.length; i++) { 
     if (this.hasClass(classesToCheck[i])) { 
      return classesToCheck[i]; 
     } 
    } 
    return false; 

Mit freundlichen Grüßen Ein weiterer Bootstrap-Liebhaber

Answer 3

Ich glaube nicht, dass jede JS wirklich notwendig ist. Ich glaube, dass dies durch rein durch CSS und data Attribute getan werden kann.

Ja, es beinhaltet ein wenig CSS-Duplizierung, aber immer noch besser als manchmal glitchy Javascript.

1. Daten hinzufügen data-active-class auf Schaltfläche Attribut,

2. hinzufügen CSS benutzerdefinierte für alle Klassen (Beispiel einer für die Lesbarkeit, Farben aus bereits bestehenden Klassen „primärer“, „Erfolg“ genommen werden, und so weiter)

   .btn.active[data-active-class="primary"] { 
       color: #fff; 
       background-color: #286090; 
       border-color: #204d74; 
   } 
   

Inaktive Taste wie gewohnt übertragen wird, aktiv basierend auf data-* Attribut wird von diesem ^^ CSS rendern.

JSFiddle with complete CSS

Edit: Wenn SASS oder weniger die Farben verwenden kann/sollte bereits von Bootstrap definierten Variablen verwendet werden ... das löst das Duplizieren Problem.