有没有办法动态更改 PrimeFaces growl 组件的背景颜色?当是错误提示时,我想显示红色背景;当是成功提示时,我想显示绿色背景。
提前感谢。
有没有办法动态更改 PrimeFaces growl 组件的背景颜色?当是错误提示时,我想显示红色背景;当是成功提示时,我想显示绿色背景。
提前感谢。
<script>
function init () {
$(".ui-growl-image-info").parent().parent().addClass("g-info");
$(".ui-growl-image-warn").parent().parent().addClass("g-warn");
$(".ui-growl-image-error").parent().parent().addClass("g-error");
$(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}
</script>
<style>
div[id="growlForm:growl_container"] > div[class~="g-fatal"] {
background-color: black !important;
}
div[id="growlForm:growl_container"] > div[class~="g-error"] {
background-color: red !important;
}
div[id="growlForm:growl_container"] > div[class~="g-warn"]{
background-color: orange !important;
}
div[id="growlForm:growl_container"] > div[class~="g-info"]{
background-color: green !important;
}
.ui-growl-image-info ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-error ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-warn ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-fatal ~ .ui-growl-message {
color:#fff;
}
</style>
init()
方法附加到向上下文添加消息的元素。<p:commandButton value="Show" actionListener="#{someBean.someMethod}" oncomplete="init();"/>
结果是:)
希望这能帮到任何人。
<style>
div[id="forma:growl-error_container"] > div {
background-color: red !important;
}
div[id="forma:growl-success_container"] > div{
background-color: green !important;
}
</style>
<h:form id="forma">
<p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/>
<p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/>
<p:panel header="Growl">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="msg" value="Message:"/>
<p:inputText id="msg" value="#{growlView.message}" required="true" />
</h:panelGrid>
<p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="@form" />
</p:panel>
</h:form>
这是一组代码,用于演示。
<p:growl severity="info">...
或者多个。只需查看文档即可。 - Kukeltje<p:growl id="myInfo" severity="info"/>
<p:growl id="myError" severity="error"/>
#myinfo {
background-color: blue;
}
#myerror {
background-color: red;
}
但是如果你只想为其中的文本添加样式,可以使用一个growl和css兄弟选择器来实现。
但是基于styleClass添加样式,则需要进行其他操作。
对于那些仍然遇到问题,需要快速简单的解决方法,我通过使用以下代码更改背景颜色来解决了它(我使用的是Angular和TS...):
this.msgs.push({severity:'success', summary:'success', detail:'it worked'});
setTimeout(()=> { document.getElementById('*the ID*').children[0].children[0].setAttribute('style', 'background-color:green');
}, 10);
这不是最好的解决方案,但以上所有方案都无法解决问题,对我来说这已经足够好了。
你应该尝试添加你想要的CSS样式。
<style>
div[id="forma:growl-error_container"] > div {
background-color: red !important;
}
div[id="forma:growl-success_container"] > div{
background-color: green !important;
}
</style>
<p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/>
<p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/>
<h:outputStylesheet name="css/styles.css" />
<h:outputScript library="js" name="growlColour.js" />
<p:growl id="growlC" autoUpdate="true" showDetail="true" sticky="true" />
<p:commandButton id="buttonC" action="#{bean.methodC}" oncomplete="growlColour();" />
在支持Java Bean上,methodC实例化了一个growl消息:
public void methodC() {
String x = "message goes here";
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
}
显然,你可以通过修改以下代码中的严重程度来改变颜色。 JS通过将CSS类应用于正确的growl消息对象来修改growl消息。
styles.css:
.g-info {
background-color: green;
}
.g-warn {
background-color: red;
}
.g-error {
background-color: red;
}
.g-fatal {
background-color: black;
}
growlColour.js:
function growlColour() {
$(".ui-growl-image-info").parent().parent().addClass("g-info");
$(".ui-growl-image-warn").parent().parent().addClass("g-warn");
$(".ui-growl-image-error").parent().parent().addClass("g-error");
$(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}
我认为这是最简单和最稳健的方法。
编辑: 有时候oncomplete不起作用,例如如果ajax设置为false。对于所有情况来说,最好的解决方案似乎是不要通过JSF调用JS。相反,在您在后端bean中创建消息后,请添加此行代码:
public void methodC() {
String x = "message goes here";
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
RequestContext.getCurrentInstance().execute("growlColour();");
}