jQuery UI 和 Bootstrap 之间的冲突也适用于“buttonset”答案

【问题标题】：Conflict between jQuery UI and Bootstrap also for "buttonset"jQuery UI 和 Bootstrap 之间的冲突也适用于“buttonset”
【发布时间】：2015-12-29 19:49:30
【问题描述】：

我和这个问题here有同样的问题，就是jQuery UI和Bootstrap的冲突。 Darkseal给出的答案

$.widget.bridge('uibutton', $.ui.button);

完全解决了“按钮”小部件的问题。但在我看来，“按钮集”小部件也揭示了两个库之间的冲突，但是

$.widget.bridge('uibuttonset', $.ui.buttonset);

不适合我。我做错了吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这是一个较老的问题，但我想我会分享我的解决方法。

你不需要...

$.widget.bridge('uibuttonset', $.ui.buttonset);

与 Bootstrap (v3.3.6) 没有任何冲突。问题是 $.ui.buttonset 调用 .button() 这不是您声明的新名称，因此冲突继续存在。为了解决这个问题，我在 .buttonset() 中更新了对 .button() 的调用，以匹配新名称“uibutton”或您声明的任何名称。

下面是我的 jQuery UI 1.11.4 版本的代码。也许有更简单的解决方法，但我没有遇到过。

$.widget( "ui.buttonset", {
version: "1.11.4",
options: {
    items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
},

_create: function() {
    this.element.addClass( "ui-buttonset" );
},

_init: function() {
    this.refresh();
},

_setOption: function( key, value ) {
    if ( key === "disabled" ) {
        this.buttons.uibutton( "option", key, value );
    }

    this._super( key, value );
},

refresh: function() {
    var rtl = this.element.css( "direction" ) === "rtl",
        allButtons = this.element.find( this.options.items ),
        existingButtons = allButtons.filter( ":ui-button" );

    // Initialize new buttons
    allButtons.not( ":ui-button" ).uibutton();

    // Refresh existing buttons
    existingButtons.uibutton( "refresh" );

    this.buttons = allButtons
        .map(function() {
            return $( this ).uibutton( "widget" )[ 0 ];
        })
            .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
            .filter( ":first" )
                .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
            .end()
            .filter( ":last" )
                .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
            .end()
        .end();
},

_destroy: function() {
    this.element.removeClass( "ui-buttonset" );
    this.buttons
        .map(function() {
            return $( this ).uibutton( "widget" )[ 0 ];
        })
            .removeClass( "ui-corner-left ui-corner-right" )
        .end()
        .uibutton( "destroy" );
}
});

我希望这对您和其他所有人都有帮助。

【讨论】：