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

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

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

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

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

спасибо

10
jquery jquery-ui jquery-ui-dialog modal-dialog

2 ответов

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

jQuery UI widgets реализует фабрику виджетов. При инициализации виджета запускается событие "create". Используйте это событие для изменения сгенерированной разметки:

$( "#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');
    }
});

демо

15

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

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

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

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