15

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

4

3 に答える 3

22

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グループ内の各ボタンに を追加するだけです。

jsfiddle

アップデート

クラスでボタンを開始するときの応答を改善するために、要点を変更して作成しました。 Toggle Twitter ブートストラップ クラス

アップデート

アクティブなラジオボタンをクリックしたときに表示されるバグを修正するために変更を加えました

ここで見つけてください

于 2012-06-29T18:32:32.147 に答える
14

JSが本当に必要だとは思いません。これは、純粋に CSS とdata属性によって実行できると思います。

はい、少しCSS の重複が伴いますが、時々不具合のある JavaScript よりはましです。

  1. data-active-classボタンに data 属性を追加し、

  2. すべてのクラスにカスタム CSS を追加します (読みやすくするための例です。色は既存のクラス "primary"、"success" などから取得されます)。

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

非アクティブなボタンは通常どおりレンダリングされ、属性に基づくアクティブなdata-*ボタンはこの ^^ CSS によってレンダリングされます。

完全な CSS を使用した JSFiddle

編集： SASSまたはLESSを使用する場合、Bootstrapによってすでに定義されている変数から色を使用できる/使用する必要があります...これにより、重複の問題が解決されます。

于 2015-04-23T20:57:20.783 に答える
3

私はあなたのコードを編集しました。コード内のアクティブな状態をクリックすると、すべてが台無しになります。これを防ぐ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;

もう一人の Bootstrap 愛好家

于 2013-03-13T01:08:45.617 に答える