對於面板的錯誤消息樣式

我正在使用PrimeFaces，它不但使用JQuery UI，而且使用JQuery UI來處理功能，但它的CSS樣式框架。這個問題來自我對CSS框架的無知，而且我一直無法找到任何示例或文檔來指導我。對於面板的錯誤消息樣式

我想要做的是使用主題的樣式錯誤消息爲我自己的面板。類似這樣的：

<p:panel rendered="#{bean.someError}" styleClass="?? what goes here ??"> 
    <h:outputText styleClass="?? what goes here ??" 
     value="Error! A parameter to this page is wrong so it can't be rendered. This 
       is probably because you used a stale bookmark." /> 
</p:panel>

我希望它看起來類似於您在使用時得到的錯誤消息。任何指針非常讚賞。

來源

2012-07-06 AlanObject

最簡單的方法是查看primefaces showcase，並使用firebug查看css類。

我認爲你應該用layout =「block」而不是p:panel來使用p:outputPanel，因爲面板有自己的樣式。相反，具有塊佈局的outputPanel呈現不帶樣式的div。

無論如何，這是你的代碼應該怎麼看起來像

<p:outputPanel rendered="#{bean.someError}" layout="block" styleClass="ui-messages ui-widget"> 
    <div class="ui-messages-error ui-corner-all"> 
     <span class="ui-messages-error-icon"></span> 
     <ul> 
      <li> 
       <span class="ui-messages-error-summary"> 
        <h:outputText value="Error! A parameter to this page is wrong so it can't 
             be rendered. This is probably because you used a 
             stale bookmark." /> 

       </span> 
      </li> 
     </ul> 
    </div> 
</p:outputPanel>

來源

2012-07-10 13:14:49 Damian

謝謝 - 我已經開始撬開CSS類的過程，但我還沒有掌握結構。今晚我回家時我會試試這個。 – AlanObject 2012-07-10 17:41:04

完美工作。謝謝。 – AlanObject 2012-07-14 18:31:11

對於單消息它足夠多的有：

<div class="ui-message-error ui-corner-all"> 
     <span class="ui-message-error-icon"/> 
     <span class="ui-message-error-detail">your message here</span> 
</div>

這是一個有點不太標籤，然後在達米安的答案。

來源

2013-05-31 07:11:11

但是你不能動態更新你的信息，你可以用達米安的解決方案。至少應該在答案中提到。因此我認爲達米安的答案更好 – Kukeltje 2015-07-01 12:11:45

對於面板的錯誤消息樣式

回答

相關問題