在 jQuery UI 对话框上设置圆角类型答案

【问题标题】：Setting rounded corner types on jQuery UI Dialog在 jQuery UI 对话框上设置圆角类型
【发布时间】：2012-02-01 11:00:47
【问题描述】：

我正在使用 jquery 对话框插件，默认情况下标题栏的所有 4 个角都是圆角的。您可以在此处查看对话框生成的标记

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

在该示例中，您可以在ui-dialog-titlebar div 上看到一个名为ui-corner-all 的类，我想将其更改为ui-corner-top。当我启动对话时，有没有办法设置圆角类的类型？

有编辑 jquery UI 对话框 javascript 文件的 hacky 选项，以使该类始终存在，但这似乎不灵活。

谢谢

【问题讨论】：

标签： jquery jquery-ui modal-dialog jquery-ui-dialog

【解决方案1】：

您不应该更改 jquery ui 库来执行此操作。想象一下，每次要升级库时都必须更改库。

jQuery UI 小部件实现了小部件工厂。当一个小部件被初始化时，会触发一个事件“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');
    }
});

DEMO

【讨论】：

【解决方案2】：

对于那些只想完全删除边框半径（或任何其他 JQuery UI 样式）的人，您需要在对话框选项中创建一个“dialogClass”。

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

完成此操作后，您可以在自己的 CSS 样式表中修改任何默认类和样式。

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

【讨论】：