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?
1 Answer
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
