Configuración de tipos de esquinas redondeadas en jQuery UI Dialog

Question

Estoy usando el complemento de diálogo jquery y el valor predeterminado es tener redondeadas las 4 esquinas de la barra de título. Se puede ver el margen de beneficio que el diálogo produce aquí

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

En el ejemplo que se puede ver en el contenedor div ui-dialog-titlebar hay una clase llamada ui-corner-all, me gustaría cambiar eso a ui-corner-top. ¿Hay alguna forma de establecer el tipo de clase de esquina redondeada cuando inicio el diálogo?

Existe la opción hacky de editar el archivo JavaScript de la interfaz de usuario de jquery para tener esa clase siempre ahí pero que parece inflexible.

Gracias

Answer 1

No debe modificar la biblioteca jQuery UI para hacer eso. Imagine que tendrá que modificar la biblioteca cada vez que quiera actualizarla.

jQuery UI widgets implementa Widget Factory. Cuando se inicializa un widget, se activa un evento "crear". Utilice este evento para alterar el marcado generado:

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

Para aquellos que simplemente quieren quitar la frontera de radio completo (o cualquier otro estilo de jQuery UI), es necesario crear un "dialogClass" en las opciones de diálogo.

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

Una vez que lo ha hecho, usted puede modificar cada una de las clases y los estilos por defecto dentro de su propia hoja de estilos CSS.

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