Question

jQuery UI主题很适用于整个文档，但我有些情况下必须更改对话框的样式，如标题栏颜色。

在我的jQuery UI css中，标题栏被编码：

.ui-dialog .ui-dialog-titlebar {padding：.4em 1em;位置：相对; }

这是我的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');

Answer 2

首先，

根据documentation .css（）将属性作为参数看来你正在尝试更改ui-dialog-titlebar。相反，试试这个：

...
function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.dialog('open');
  $(".ui-dialog .ui-dialog-title").css('color','red'); 
  $(".ui-dialog .ui-dialog-title").css('background-color','orange'); 
  //Assuming you want to change header color only
  //see the theming structure at http://jqueryui.com/demos/dialog/#theming
};

jQueryUI.dialog：覆盖单个css样式属性？

2 个答案: