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

时间:2022-12-14 20:29:28

I have something like this:

我有这样的事情:

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

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

Can i change background color of dialog title somehow like this?:

我能不能像这样更改对话框标题的背景颜色?:

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

3 个解决方案

#1


24  

Use prev() instead of find() because that element is not inside $div:

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

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

Also I use background to override all other elements like background-image

此外,我使用背景覆盖所有其他元素,如背景图像

Check this http://jsfiddle.net/Ad7nF/

检查这个http://jsfiddle.net/Ad7nF/

#2


19  

Another method to do is to :

另一种方法是:

Define your styling class - myTitleClass

定义样式类 - myTitleClass

Define the css as

将css定义为

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

and add the custom class to the dialog initialization function :

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

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

JSFiddle - (but with another sample code)

JSFiddle - (但有另一个示例代码)

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

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

#3


0  

Most simple way is this: -

最简单的方法是: -

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

#1


24  

Use prev() instead of find() because that element is not inside $div:

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

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

Also I use background to override all other elements like background-image

此外,我使用背景覆盖所有其他元素,如背景图像

Check this http://jsfiddle.net/Ad7nF/

检查这个http://jsfiddle.net/Ad7nF/

#2


19  

Another method to do is to :

另一种方法是:

Define your styling class - myTitleClass

定义样式类 - myTitleClass

Define the css as

将css定义为

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

and add the custom class to the dialog initialization function :

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

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

JSFiddle - (but with another sample code)

JSFiddle - (但有另一个示例代码)

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

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

#3


0  

Most simple way is this: -

最简单的方法是: -

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