Установка типов закругленных углов в диалоге jQuery UI

Question

Я использую плагин диалога jquery, и по умолчанию все 4 угла заголовка закруглены.Вы можете увидеть разметку, которую диалоговое окно производит здесь

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

В этом примере, который вы можете увидеть на ui-dialog-titlebar div, есть класс с именем ui-corner-all, я хотел бычтобы изменить это на ui-corner-top.Есть ли способ установить тип класса закругленных углов при запуске диалога?

Есть хакерская опция редактирования файла javascript диалогового окна jquery UI, чтобы этот класс всегда был там, но это кажется негибким.

Спасибо

Answer 1

Вы не должны изменять библиотеку jquery ui, чтобы сделать это. Представьте, что вам придется изменять библиотеку каждый раз, когда вы хотите обновить ее.

Виджеты jQuery UI реализуют Фабрику виджетов. Когда виджет инициализируется, вызывается событие «создать». Используйте это событие для изменения сгенерированной разметки:

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

Для тех из вас, кто просто хочет полностью удалить радиус границы (или любые другие стили пользовательского интерфейса JQuery), вам необходимо создать "dialogClass" в параметрах диалога.

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

Как только вы это сделаете, вы можете изменить любой из классов и стилей по умолчанию в вашей собственной таблице стилей CSS.

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