Przełącza klasę przycisków Bootstrap, gdy jest aktywna

Question

Podczas twitter bootstrap, szukałem sposobu na to, aby przycisk był domyślnym kolorem, gdy nie jest aktywny. Gdy przycisk jest aktywny, chciałem zmienić jego kolor. Sprawdziłem, jak to zrobić z dostarczonym plikiem js. W końcu napisałem mały skrypt, żeby sobie z tym poradzić.

Answer 1

Dodanie class-toggle jako atrybutu przycisku odpowiadającego temu, co chciałbyś zrobić po naciśnięciu przycisku i dodaniu następującego jQuery, otrzymasz wynik opisany powyżej.

$('.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')); 
       } 
      } 

      } 


     }); 

następnie przycisk będzie wyglądać

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

Jeśli chcesz zrobić z grupy przycisków jak dobrze to działa w ten sam sposób. Wystarczy dodać class-toggle do każdego przycisku w grupie.

The jsfiddle

UPDATE

I zostały zmodyfikowane i stworzył istotę mieć lepszą odpowiedź gdy zaczyna Cię przycisku z klasą. Toggle Twitter Bootstrap Classes

UPDATE

dokonaniu zmiany, aby rozwiązać problem, który pojawia się po kliknięciu na aktywnym przyciskiem radiowym

Find it here

Answer 2

Mam edytować kod. Jeśli klikniesz na stan aktywny w swoim kodzie, wszystkie będą się mnożyć. Dodałem trochę instrukcji if, która temu zapobiega. Tylko wkład, jeśli będziesz potrzebować poprawki. Dobra praca z kodem.

$('.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; 

poważaniem Innym Bootstrap Lover

Answer 3

Nie sądzę, że każdy JS jest to naprawdę konieczne. Wierzę, że można to zrobić poprzez wyłącznie za pomocą CSS i data atrybutów.

Tak, dotyczy to trochę powielania powielania CSS, ale nadal lepiej niż czasami glitchy javascript.

1. Dodaj atrybut danych data-active-class przycisku,

2. Dodaj niestandardowy CSS dla wszystkich klas (przykład jeden dla czytelności; kolory są pobierane z już istniejących klas „primary”, „Sukces”, i tak dalej)

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

przycisk Nieaktywny spowoduje, jak zwykle, aktywnego podstawie data-* atrybut wyrenderuje ten ^^ CSS.

JSFiddle with complete CSS

Edit: Podczas korzystania Sass lub mniej kolorów mogą/powinny być stosowane już od zmiennych zdefiniowanych przez Bootstrap ... że rozwiązuje powielanie problem.