Переключить класс "Щебетать" при активации

В twitter bootstrap я искал способ, чтобы кнопка была цветом по умолчанию, когда она не активна. Когда кнопка активна, я хочу изменить ее цвет. Я посмотрел, как это сделать с предоставленным js файлом. В конце концов я написал немного script, чтобы справиться с этим.

Ответы

Ответ 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 к каждой кнопке в группе.

jsfiddle

UPDATE

Я изменил и создал суть, чтобы лучше реагировать, когда вы запускаете кнопку с классом. Переключить классы Bootstrap Twitter

UPDATE

Я внес изменения, чтобы исправить ошибку, которая появляется при нажатии активного переключателя

Найти здесь

Ответ 2

Я не думаю, что любой JS действительно необходим. Я считаю, что это можно сделать исключительно с помощью CSS и data атрибутов.

Да, это связано с небольшим дублированием CSS, но все же лучше, чем иногда глючный javascript.

Добавить атрибут данных data-active-class к кнопке,
Добавить пользовательский CSS для всех классов (пример одного для удобства чтения, цвета взяты из уже существующих классов "primary", "success" и т.д.)
```
.btn.active[data-active-class="primary"] {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
```

Неактивная кнопка будет отображаться как обычно, активная на основе атрибута data-* будет отображаться этим ^^ CSS.

JSFiddle с полным CSS

Edit: При использовании SASS или LESS цвета могут/должны использоваться из переменных, уже определенных Bootstrap..., которые решают проблему дублирования.

Ответ 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