javascript - jQuery UI 和 Bootstrap 之间的冲突也为 "buttonset"

Question

我遇到了与此问题相同的问题 here ，这就是jQuery UI和Bootstrap之间的冲突。 Darkseal 给出的答案

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

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

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

对我来说不起作用。我做错了什么吗？

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

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