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

Question

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

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

在那个例子中你可以在ui-dialog-titlebardiv上看到有一个叫做的类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