Basculer la classe de bouton Bootstrap Twitter lorsqu'elle est active

Dans twitter bootstrap, je cherchais un moyen pour permettre à un bouton à la couleur par défaut lorsqu'il n'est pas actif. Une fois qu'un bouton est actif, j'ai voulu changer la couleur. J'ai regardé les moyens de le faire avec le fichier js qui vous a été fourni. J'ai fini d'écrire un petit script pour gérer cela.

source d'informationauteur bretterer

  1. 21

    En ajoutant class-toggle comme un attribut de la touche numérique correspondant à ce que vous aimeriez aller pour une fois que le bouton est enfoncé et que l'adjonction de jQuery, vous obtiendrez le résultat décrit ci-dessus.

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

          }


      });

    Ensuite sur le bouton ressemblerait 

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

    Si vous voulez le faire avec un groupe de boutons ainsi, il fonctionne de la même manière. Il suffit d'ajouter le class-toggle à chaque bouton dans le groupe.

    Le jsfiddle

    Mise à JOUR

    J'ai modifié et créé un essentiel à avoir une meilleure réponse lorsque vous commencer le bouton avec une classe. La Bascule De Twitter Bootstrap Classes

    Mise à JOUR

    J'ai fait un changement de corriger le bug qui apparaît lorsque vous cliquez sur un bouton radio actif

    Le trouver ici

  2. 14

    Je ne pense pas que, que tout le JS est vraiment nécessaire.
    Je crois que cela peut en fait purement par CSS et data attributs.

    Oui, elle implique un peu de CSS duplicationmais toujours mieux que parfois glitch javascript.

    1. Ajouter l'attribut de données data-active-class à bouton,

    2. Ajouter CSS personnalisé pour toutes les classes (par exemple pour des raisons de lisibilité; les couleurs sont prises à partir des classes déjà existantes "primaire", "succès", et ainsi de suite)

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

    Bouton inactif sera rendu comme d'habitude, active basé sur data-* attribut sera rendu par le présent^^ CSS.

    JSFiddle avec complet CSS

    Edit:
    Lors de l'utilisation de SASS ou MOINS les couleurs peuvent/doivent être utilisés à partir de variables déjà définies par Bootstrap... qui résout le dupliquer problème.

  3. 3

    J'ai édité votre code. Si vous cliquez sur un état actif dans votre code, il tous les mess. J'ai ajouté un peu si l'instruction qui permet d'éviter cela. Juste une contribution si ya aurez besoin de la fixer. Bon travail avec le 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;

    Sincèrement Un Autre Bootstrap Amant