jquery - btn-primaryを使用したTwitterブーストラップボタングループ

Question

ここbtn-groupで説明するように（buttons-radioモード、つまりラジオスタイル）を定義したいのですが、選択したボタンのクラスを使用する代わりに、を使用して、選択したボタンがよりはっきりと見えるようにします。activebtn-primary

私の質問は、これを実現するためにカスタムjavascript / jQueryを実装する必要がありますか、それとも、選択したボタンbtn-primaryの代わりに使用するようにブートストラップに指示できますか？active

Answer 1

ブートストラップJSを変更することはお勧めしません。カスタムのonclickイベントを作成し、ブートストラップコードを「リサイクル」することをお勧めします。

私の場合、次のようなHTMLがありました。

<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>

編集： トグル機能をオーバーライドする方法がわかりました

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

これにより、必要なbtnグループのみをスタイル設定できます。

Answer 2

あなたがする必要があるのはjsライブラリを変更することだけです。以下のコードを変更します（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')
  }

次のようになります。

  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')
  }

Answer 3

私はdarklessに同意します、既存のjavascriptを変更しないでください。

私は次のようなことをしました：

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);
});