CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrapjquery-ui-widget-factory
Indev
Indev

Reputation: 81

Developing UI components for Bootstrap using jQuery UI Widget Factory

Can the jQuery UI Widget Factory be used to create widgets that will play nice with Twitter Bootsrap? I know that many existing jQuery UI widgets cause problems when used in conjunction with Bootstrap. Is the Widget Factory itself responsible for any of these issues?

Upvotes: 1

Views: 512

Answers (1)

ezanker
ezanker

Reputation: 24738

Yes. The widget factory just creates a jQuery plugin. Within the plugin code you can assign Bootstrap classes to your DOM elements instead of jQuery UI Theme classes.

Here is an (contrived) example that creates a Bootstrap button with the btn-success class:

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

Working DEMO

Upvotes: 2

Related Questions