4

我正在使用 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>

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

4

2 回答 2

4

最简单的方法是查看 primefaces show ，并使用 firebug 查看 css 类。

我认为您应该使用p:outputPanelwith layout="block" 而不是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>
于 2012-07-10T13:14:49.910 回答
1

对于单个消息，拥有以下内容就足够了：

<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-31T07:11:11.363 回答