Ustawianie zaokrąglonych narożników w oknie dialogowym jQuery UI

Question

Używam wtyczki okna dialogowego jquery, a domyślnie zaokrąglane są wszystkie 4 rogi paska tytułu. Można zobaczyć, że dialog znaczników produkuje tutaj

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

W tym przykładzie można zobaczyć na ui-dialog-titlebar div istnieje klasa o nazwie ui-corner-all Chciałbym to zmienić, aby ui-corner-top. Czy istnieje sposób na ustawienie typu zaokrąglonej klasy narożnej podczas inicjowania okna dialogowego?

Istnieje hacky możliwość edytowania pliku javascript okna dialogowego interfejsu użytkownika jquery, aby ta klasa była zawsze tam, ale wydaje się nieelastyczna.

Dzięki

Answer 1

Nie należy zmieniać biblioteki jQuery UI, aby to zrobić. Wyobraź sobie, że będziesz musiał zmienić bibliotekę za każdym razem, gdy chcesz ją uaktualnić.

Widżety jQuery UI implementują fabrykę widżetów. Po zainicjowaniu widgetu uruchamiane jest zdarzenie "create". Użyj tego zdarzenia, aby zmieniać wygenerowany znaczników:

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

Dla tych z Was, które po prostu chcą, aby usunąć border-radius całkowicie (lub jakiekolwiek inne style jQuery UI), należy utworzyć "dialogClass" w opcjach okna dialogowego.

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

Po wykonaniu tej czynności można zmodyfikować dowolne domyślne klasy i style w swoim własnym arkuszu stylów CSS.

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