Question

I’m using the jquery dialog plugin and the default is to have all 4 corners of the titlebar rounded. You can see the markup that the dialog produces here

http://jqueryui.com/demos/dialog/#theming

In the that example you can see on the ui-dialog-titlebar div there is a class called ui-corner-all, I would like to change that to ui-corner-top. Is there a way to set the type of rounded corner class when I initiate the dialog?

There is the hacky option of editing the jquery UI dialog javascript file to have that class always in there but that seems inflexible.

Thanks

Answer 1

You shouldn’t alter the jquery ui library to do that. Imagine you’ll have to alter the library each time you want to upgrade it.

jQuery UI widgets implements the Widget Factory. When a widget is initialized, an event “create” is fired. Use this event to alter the generated markup:

$( "#dialog" ).dialog({
    create: function(e, ui) {
        // 'this' is #dialog
        // get the whole widget (.ui-dialog) with .dialog('widget')
        $(this).dialog('widget')
            // find the title bar element
            .find('.ui-dialog-titlebar')
            // alter the css classes
            .removeClass('ui-corner-all')
            .addClass('ui-corner-top');
    }
});

DEMO