面板的错误消息样式

Question

我正在使用 PrimeFaces，它反过来使用 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>

我希望它看起来类似于您在使用 .任何指针都非常感谢。

Answer 1

最简单的方法是查看 primefaces showcase，然后使用 firebug 查看 css 类。

我认为你应该使用带有 layout="block" 的p:outputPanel 而不是p:panel，因为面板有自己的样式。相反，带有块布局的 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>

Answer 2

单条消息就够了：

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

比达米安的回答要少一些标签。