Question

我正在使用jquery对话框插件，默认是将标题栏的所有4个角都舍入。您可以在此处看到对话框生成的标记

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

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

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

由于

Answer 1

你不应该改变jquery ui库来做到这一点。想象一下，每次要升级它时都必须更改库。

jQuery UI小部件实现了Widget Factory。初始化窗口小部件时，会触发事件“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

Answer 2

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

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

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

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

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

2 个答案: