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

Posted 2023-03-06

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

【英文标题】：How can I change dialog title color in jquery ui?

【发布时间】：2014-02-15 17:07:16

【问题描述】：

我有这样的事情：

$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");

【问题讨论】：

怀疑，会有一种样式会覆盖您设置的任何样式。我的建议是找到它的样式，创建另一个名称不同的样式，然后在您的 jquery 中替换它。

Themeroller?: jqueryui.com/themeroller

@Gjohn - 内联样式会覆盖 css 样式，因此此更改应该有效。 milandjukic88 - 查看您设计的代码是否有效的最简单方法是尝试它。 :-P

@Gjohn 我在页面上打开了多个对话框。我只想改变一个。以你的方式，能做到吗？

@ScottMermelstein 我正在尝试，但它不起作用：D

【参考方案1】：

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

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

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

查看http://jsfiddle.net/Ad7nF/

【讨论】：

嘿..如何在上面的例子中添加背景颜色和背景边框？

@RadhikaKulkarni 尝试使用 .addClass() 代替 .css() 方法添加类

【参考方案2】：

另一种方法是：

定义你的样式类 - myTitleClass

定义css为

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

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

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

JSFiddle -（但带有另一个示例代码）

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

【讨论】：

我认为这是最好的答案，因为它允许具有不同 css 的多个对话框，而无需即时更改它。

这种方法允许更改每一个对话框设计，同时保留 CSS 文件的复杂性。正如 Zak 所提到的，您不仅可以通过更改类名来拥有多种样式，而且您还可以通过更改源 CSS 文件来提供完全不同的设计和颜色选择。这个答案提供了迄今为止我发现的最佳方法。

【参考方案3】：

最简单的方法是这样的：-

.ui-dialog-titlebar 
      background:red;

【讨论】：

它有效，但它会强制您在页面中的每个对话框中使用相同的背景。我认为@user1428716 的答案是最好的方法。