如何在jquery ui中更改对话框标题颜色？

Question

我有这样的事情：

$div = $('<div id="error" title="Error">');
$div.append('<p>Hi</p>');

$div.dialog({
    modal: true,
    maxHeight:500,
});

我可以这样更改对话框标题的背景颜色吗？：

 $div.dialog({
        modal: true,
        maxHeight:500,
    }).find(".ui-dialog-titlebar").css("background-color","red");

Answer 1

使用prev()代替find()，因为该元素不在$div内：

$div.dialog({
    modal: true,
    maxHeight:500,
}).prev(".ui-dialog-titlebar").css("background","red");

此外，我使用background覆盖所有其他元素，例如background-image

选中此http://jsfiddle.net/Ad7nF/

Answer 2

另一种方法是：

定义样式类 - myTitleClass

将css定义为

  . myTitleClass .ui-dialog-titlebar {
          background:red;
    }

并将自定义类添加到对话框初始化函数中：

     $( "#dialog" ).dialog({
        autoOpen: false,
        dialogClass: 'myTitleClass'
     });

JSFiddle - （但使用另一个示例代码）

http://jsfiddle.net/khVYj/3/

Answer 3

最简单的方法是： -

.ui-dialog-titlebar {
      background:red;
}