Impostazione dei tipi di angoli arrotondati sulla finestra di dialogo dell'interfaccia utente jQuery

Question

Utilizzo il plug-in della finestra di dialogo jQuery e l'impostazione predefinita prevede l'arrotondamento di tutti e 4 gli angoli della barra del titolo. Si può vedere il markup che la finestra di dialogo produce qui

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

Nel quell'esempio si può vedere sul ui-dialog-titlebar div v'è una classe chiamata ui-corner-all, vorrei cambiare la situazione a ui-corner-top. C'è un modo per impostare il tipo di classe degli angoli arrotondati quando avvio il dialogo?

C'è l'opzione hacky di modificare il file javascript dell'interfaccia utente jQuery per avere quella classe sempre lì ma che sembra inflessibile.

Grazie

Answer 1

Lei non dovrebbe alterare la libreria jQuery UI per farlo. Immagina di dover modificare la libreria ogni volta che vuoi aggiornarla.

jQuery I widget UI implementano il Widget Factory. Quando un widget viene inizializzato, viene generato un evento "create". Utilizzare questo evento per modificare il markup generato:

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

Per quelli di voi che vogliono semplicemente rimuovere il border-radius del tutto (o tutti gli altri stili jQuery UI), è necessario creare un "dialogClass" nelle opzioni di dialogo.

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

Una volta fatto, è possibile modificare le classi e gli stili predefiniti all'interno del proprio foglio di stile CSS.

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