アクティブ時のTwitter Bootstrapボタンクラスの切り替え

Question

twitterのブートストラップでは、アクティブでないときにボタンをデフォルトの色にする方法を探していました。ボタンがアクティブになったら、そのボタンの色を変更したいと思っていました。私は提供されたjsファイルでそれを行う方法を見ました。私はこれを処理するための小さなスクリプトを書くことを終了しました。

Answer 1

ボタンに属性としてclass-toggleを追加すると、ボタンを押した後に移動したい項目と同じになり、次のjQueryを追加すると、上記の結果が得られます。

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

      } 


     }); 

あなたにもそれは同じように動作ボタングループでそれをしたい場合は、ボタンが

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

ようになります。グループの各ボタンにclass-toggleを追加するだけです。

The jsfiddle

UPDATE

私が変更され、クラスであなたのボタンを起動するときに良好な応答を持っている要旨を作成しました。 Toggle Twitter Bootstrap Classes

UPDATE

私はあなたがアクティブなラジオボタン

Find it here

Answer 2

をクリックしたときに私はあなたのコードを編集した表示されるバグを修正するための変更を行いました。あなたのコードでアクティブな状態をクリックすると、すべてが壊れてしまいます。これを防ぐためのif文を少し追加しました。あとで修正が必要な場合にはちょっと寄付。コードでうまく動作します。

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

敬具別のブートストラップの恋人

Answer 3

私は、任意のJSが本当に必要であると、考えていません。 私はこれが完全にCSSでとdataという属性とすることができると信じています。

はい、少しのCSSの複製が含まれますが、ときどきglitchy javascriptよりも優れています。

;（ように色が「主」、「成功」、既存のクラスから取得され、かつ読みやすくするため1の例）

2. すべてのクラス用のカスタムCSSを追加し、データがボタンにdata-active-class属性追加

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

非アクティブボタンは、いつものようにdata-*に基づいてアクティブをレンダリングしますこの^^ CSSによって属性がレンダリングされます。

JSFiddle with complete CSS

編集：SASSを使用して以下の場合は 色は/問題を複製を解決している...すでにブートストラップによって定義された変数から使用する必要がありますすることができます。