使用 jQuery UI Widget Factory 为 Bootstrap 开发 UI 组件

Question

jQuery UI Widget Factory 能否用于创建与 Twitter Bootsrap 配合使用的小部件？我知道许多现有的 jQuery UI 小部件在与 Bootstrap 结合使用时会导致问题。 Widget Factory 本身是否对这些问题负责？

Answer 1

是的。小部件工厂只是创建了一个 jQuery 插件。在插件代码中，您可以将 Bootstrap 类分配给您的 DOM 元素，而不是 jQuery UI 主题类。

这是一个（人为的）示例，它使用 btn-success 类创建引导按钮：

$(function () {
    $.widget("bs.SuccessButton", {
        options: {
            width: '100px',
            text: 'Default Text'
        },
        _create: function () {
            this._button = $("<button>");
            this._button.text(this.options.text);
            this._button.width(this.options.width)
            this._button.addClass("btn btn-success")
            $(this.element).append(this._button);
        }
    });


    $("#button1").SuccessButton({
        text: 'btn1 Widget'
    });    
    $("#button2").SuccessButton({
        width: '100%'
    });
});

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div id="button1"></div>
        </div>
        <div class="col-xs-6">
            <div id="button2"></div>
        </div>
    </div>
</div>

工作DEMO