CODEWITHSUNDEEP
jquerytwitter-bootstrap
blueFast
blueFast

Reputation: 44361

Twitter boostrap button groups using btn-primary

I would like to define a btn-group (buttons-radio mode, that is, radio style), as explained here, but instead of using the the active class for the selected button, I would like to use btn-primary, so that the selected button is more clearly visible.

My question is: do I need to implement custom javascript/jQuery to achieve this, or can I somehow tell bootstrap to use btn-primary instead of active for selected button?

Upvotes: 2

Views: 1957

Answers (3)

Nathan Koop
Nathan Koop

Reputation: 25197

I agree with darkless, don't modify the existing javascript.

I did something along the lines of:

HTML: 

<div class="my-parent-row">
    <div class="btn-group" data-toggle="buttons-radio" data-selected-class="btn-success">
        <button class="btn btn-success active">First option</button>
        <button class="btn">Other option</button>                
    </div>
</div>

Javascript:

$(".my-parent-row .btn-group .btn").on("click", function () {
    var selectedClass = $(this).parent().data("selected-class");
    $(this).siblings("." + selectedClass).removeClass(selectedClass);
    $(this).addClass(selectedClass);
});

Upvotes: 0

darkless
darkless

Reputation: 1314

I wouldn't recommend to change any of bootstrap JS. It's better to create custom onclick event and "recycle" bootstrap code.

In my case I had HTML like:

<div id="bar" class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-large btn-success active">First</button>
    <button type="button" class="btn btn-large">Second</button>
    <button type="button" class="btn btn-large">Third</button>
</div>

EDIT: I've come how to override toggle function

$.fn.button.Constructor.prototype.oldtoggle = $.fn.button.Constructor.prototype.toggle
$.fn.button.Constructor.prototype.toggle = function(){
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.btn-success')
      .removeClass('btn-success')

    this.$element.toggleClass('btn-success')
    this.oldtoggle()
}

This allows you to style only the btn-groups you want.

Upvotes: 3

Adit
Adit

Reputation: 134

all you need to do is modify the js library. Change the below code (please find them in bootstrap-button.js):

  Button.prototype.toggle = function () {
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

to be the following:

  Button.prototype.toggle = function () {
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.btn-primary')
      .removeClass('btn-primary')

    this.$element.toggleClass('btn-primary')
  }

Upvotes: 1

Related Questions