css - jQueryUI.对话框 : override single css style property?

Question

jQuery UI 主题很好，它们适用于整个文档，但是我遇到了一些情况，其中对话框的样式(例如标题栏颜色)必须更改。

在我的 jQuery UI CSS 中，标题栏被编码为:

.ui-dialog .ui-dialog-titlebar { 填充:.4em 1em;position:relative；

这是我的 javascript:

var $AlertDialog = $('<div"></div>')
.dialog({
  autoOpen: false,
  title: 'Alert Message',
  buttons: {Ok: function() {$( this ).dialog( "close" );}}
});     

function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.css('ui-dialog-titlebar','color: red');
  $AlertDialog.dialog('open');
};

然后调用 Alerter() 来替代 alert()。

访问和更改“ui-dialog-titlebar”的颜色属性无效。

这个问题之前有很多阅读资料。似乎其他人也有类似的问题，但不是特定于 jQuery UI。

如何做到这一点？

---

更新:

感谢一个很好的提示，我这样做了:

$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');

有效。但可接受的做法？

Answer 1

我的建议是不要使用 .ui-dialog 选择器，因为一页上可能有多个对话框。可以遍历到标题栏。

    ...
    $AlertDialog.html(cTxt);
    // might as well use the theme since its part of jquery ui
    $AlertDialog.prev().addClass("ui-state-error");
    $AlertDialog.dialog('open');