Alternar la clase de botón Twitter Bootstrap cuando está activo

Question

En twitter bootstrap, estaba buscando la manera de permitir que un botón sea el color predeterminado cuando no esté activo. Una vez que un botón está activo, quería cambiar el color. Miré formas de hacerlo con el archivo js que se proporcionó. Terminé escribiendo un pequeño script para manejar esto.

Answer 1

Al agregar class-toggle como un atributo al botón que equivale a lo que le gustaría ir una vez que se presiona el botón y se agrega el siguiente jQuery, obtendrá el resultado descrito anteriormente.

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

      } 


     }); 

A continuación, el botón se vería

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

Si quiere hacerlo con un grupo de botones, así que funciona de la misma manera. Simplemente agregue el class-toggle a cada botón del grupo.

The jsfiddle

ACTUALIZACIÓN

he modificado y ha creado una esencia para tener una mejor respuesta cuando a partir botón con una clase. Toggle Twitter Bootstrap Classes

ACTUALIZACIÓN

he hecho un cambio para corregir el error que aparece cuando se hace clic en un botón de radio activa

Find it here

Answer 2

He editado su código. Si hace clic en un estado activo en su código, todo se arruina. He agregado una pequeña declaración if que evita esto. Solo una contribución si necesitas la solución. Buen trabajo con el código.

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

Sinceramente Otra Bootstrap amante

Answer 3

no creo, que cualquier JS es realmente necesario. Creo que esto se puede hacer puramente por CSS y data atributos.

Sí, implica un poco de duplicación de CSS, pero aún mejor que a veces glitchy javascript.

1. Añadir datos de atributos data-active-class al botón,

2. Añadir CSS personalizado para todas las clases (ejemplo de uno para facilitar la lectura, los colores son tomados de las clases ya existentes "primaria", "éxito", y así sucesivamente)

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

botón inactivo hará que, como de costumbre, activo basado en data-* atributo será renderizado por este ^^ CSS.

JSFiddle with complete CSS

Editar: Al utilizar SASS o menos los colores pueden/deben ser utilizadas a partir de variables ya definidas por Bootstrap ... se soluciona el problema duplicar.