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

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