javascript - JGrowl 设置主题

Question

我的 Jgrowl 代码是：

    $(document).ready(function() {
        $.jGrowl("<strong>Error!</strong><br />An invalid ID was passed and your template could not be loaded", { sticky: true, theme: 'test' });
    });

我在 Jgrowl CSS 中的 CSS 是：

.test{
    background-color:       #000000;
}

但它没有将该 CSS 应用到盒子上。我可能误用了主题选项，但我很难找到很多关于它的文档。

Answer 1

.test 背景颜色被“div.jGrowl div.jGrowl-notification”样式覆盖。您可以使 .test 样式 !important：

.test{
    background-color:       #000000 !important;
}

或者更具体地访问 .test 类，如下所示：

"div.jGrowl div.jGrowl-notification.ui-state-test"

这也会覆盖它

Answer 2

您可以使用jGrowl的 Configuration Options 的参数

theme是一个 CSS 类，用于指定此特定消息的自定义样式，旨在与 jQuery UI 一起使用。

CSS：

.jGrowl .changeCount {
    background-color: #337ab7;
}

JS：

$.jGrowl("Message in box", {theme: 'changeCount'});

有关此插件的更多信息： https ://github.com/stanlemon/jGrowl/blob/master/README.md