当前位置：文江博客话题详情

jQuery 对话框主题和样式

发布于 2024-07-16 02:19:13 字数 81 浏览 6 评论 0原文

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

躲猫猫 2024-07-23 02:19:13

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

另请参阅：

回复收藏 0 原文

依靠 2024-07-23 02:19:13

我这样做（为标题添加“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>

I do this way (adding "ui-state-error" style for header):

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

                });

            });
        </script>

回复收藏 0 原文

浅忆流年 2024-07-23 02:19:13

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

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

（这假设您正在使用 jQuery UI 对话框）

回复收藏 0 原文

紅太極 2024-07-23 02:19:13

使用 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>

Use the dialogClass property. You can apply to whatever css in jquery dialog.
Below we are formatting header and content blocks.

<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>

回复收藏 0 原文

辞取 2024-07-23 02:19:13

前面的示例效果很好，但错误主题只有红色。

这里有一个简单的解决方案，只需更改 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")

必须注意，此示例适用于对话框标题，而无需它的链接。

The previous example works well but with only the red color of the error theme.

Here a simple solution with just changing the header image in the 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");
    }
});

Notice that contrary to the previous example, I removed the:

removeClass("ui-widget-header")

instead of just adding the class on the:

find(".ui-dialog-titlebar")

Must note that this example works with the dialog header without its link.

回复收藏 0 原文

冷心人i 2024-07-23 02:19:13

有时您无法编辑 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');
  } 
});

Sometimes you can't edit the css file. So you can try this:

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');
  } 
});

回复收藏 0 原文

~没有更多了~