Setting rounded corner types on jQuery UI Dialog

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

Answer 2

For those of you that simply want to remove the border-radius altogether (or any other JQuery UI styles), you need to create a "dialogClass" in the dialog options.

$( "#dialog" ).dialog({
modal: true,
draggable: true,
resizable: false,
dialogClass: "MyClass",
});

Once you have done so, you can modify any of the default classes and styles within your own CSS stylesheet.

.MyClass .ui-corner-all {
    border-radius: 0;
}