我想定义一个btn-group
(buttons-radio
模式,即单选风格),如此处所述,但active
我不想使用所选按钮的类,而是使用btn-primary
,以便使所选按钮更清晰可见。
我的问题是:我是否需要实现自定义 javascript/jQuery 来实现这一点,或者我可以以某种方式告诉引导程序使用btn-primary
而不是active
选定按钮?
我想定义一个btn-group
(buttons-radio
模式,即单选风格),如此处所述,但active
我不想使用所选按钮的类,而是使用btn-primary
,以便使所选按钮更清晰可见。
我的问题是:我是否需要实现自定义 javascript/jQuery 来实现这一点,或者我可以以某种方式告诉引导程序使用btn-primary
而不是active
选定按钮?
我不建议更改任何引导 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 组的样式。
您需要做的就是修改 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')
}
我同意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);
});