Extending jQuery UI

I’m a sucker for jQuery UI… I love the fact that I can skin these widgets and use them without having to do much css work.If you want to run your own small UI it’s not all that difficult, knowledge of jQuery is required.

One thing that I found I was missing form the jQuery UI library is a generic box just like the dialog, but one that doesn’t have the dialogs features, a simple box that I can use for listing data but it should still apply to the theme of jQuery UI.

    (function($){
        $.widget('ui.container', {
            _init: function() {
                var wrapper = $('<div></div>')
                    .addClass(
                        'ui-dialog ' +
                        'ui-widget ' +
                        'ui-widget-content ' +
                        'ui-corner-all'
                    );
                if("" != this.element.css('width')){
                    wrapper.css('width', this.element.css('width'));
                }
                this.element.wrap(wrapper);
                this.element
                    .addClass(
                        'ui-something ' +
                        'ui-dialog-content ' +
                        'ui-widget-content'
                    );
            }
        });
        $.extend($.ui.container);
    })(jQuery);
    $(function(){
         $('#lala').container();
    });

And then you can call it like this:

$(function(){
 $('#somediv').container();
});

Filed under: code is poetry , jQuery UI