活动时切换 Twitter Bootstrap 按钮类 [英] Toggle Twitter Bootstrap button class when active

问题描述

在 twitter bootstrap 中，我一直在寻找一种方法，允许按钮在不活动时成为默认颜色.一旦按钮处于活动状态，我想更改它的颜色.我查看了使用提供的 js 文件执行此操作的方法.我最终编写了一个小脚本来处理这个问题.

In twitter bootstrap, I was looking for a way to allow a button to be the default color when not active. Once a button is active, I wanted to change the color of it. I looked at ways of doing it with the js file that was provided. I ended up writting a little script to handle this.

推荐答案

通过将 class-toggle 作为属性添加到按钮，等于您按下按钮后想要转到的内容并添加下面的jQuery，你会得到上面描述的结果.

By adding class-toggle as an attribute to the button equaling what you would like to go to once the button is pressed and adding the following jQuery, you will get the result described above.

$('.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 添加到组中的每个按钮即可.

If you want to do it with a button group as well it works the same way. Just add the class-toggle to each button in the group.

jsfiddle

更新

我已经修改并创建了一个要点，以便在您开始使用课程按钮时获得更好的响应.切换 Twitter Bootstrap 类

I have modified and created a gist to have a better response when starting you button with a class. Toggle Twitter Bootstrap Classes

更新

我进行了更改以修复单击活动单选按钮时出现的错误

I have made a change to fix the bug that appears when you click on an active radio button

在此处查找

这篇关于活动时切换 Twitter Bootstrap 按钮类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！