jQuery对话框主题和样式

时间:2009-03-31 18:48:03

标签: jquery dialog themes titlebar background-color

如何更改jQuery对话框标题栏的背景颜色?

我看过themeroller,但它似乎对我不起作用。

由于

6 个答案:

答案 0 :(得分:13)

您可以通过修改ui-dialog-titlebar CSS类来更改它,但我强烈建议您使用ThemeRoller tool

另见:

答案 1 :(得分:12)

我这样做(为标题添加“ui-state-error”样式):

<script type="text/javascript">
            $(function () {
                $("#msg").dialog({
                    open: function () {
                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
                    }

                });

            });
        </script>  

答案 2 :(得分:3)

对话框中的每个元素都有关联的类。

使用Firebug检查元素并使用CSS来设置它们的样式。例如,标题栏的类别为“ui-dialog-titlebar”。

(这假设您使用的是jQuery UI对话框)

答案 3 :(得分:2)

使用dialogClass属性。您可以在jquery对话框中应用任何css。 下面我们将格式化标题和内容块。

<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
        $('#jq_dialog').dialog({
            title: 'Detalhes do produto',
            modal: true,
            resizable: false,
            width: 500,
            maxHeight: 400,
            closeText: 'fechar',
            draggable: true,
            show: 'fade',
            hide: 'fade',
            dialogClass: 'main-dialog-class'
        });
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>

答案 4 :(得分:1)

上一个示例运行良好,但只有错误主题的红色。

这是一个简单的解决方案,只需更改css中的标题图像:

的CSS:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;      
}

的javascript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
        $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-custom");
    }
});

请注意,与前一个示例相反,我删除了:

removeClass("ui-widget-header")

而不只是在:

上添加类
find(".ui-dialog-titlebar")

必须注意,此示例适用于没有链接的对话框标题。

答案 5 :(得分:0)

有时您无法编辑css文件。所以你可以试试这个:

dialog = $('<div/>').dialog({
  title: 'Dialog with css for title bar',
  open: function() {
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
  } 
});