如何将 jQueryUI 的 ui-states 与 JSF2 的 h:messages 一起使用？

Question

似乎应该非常简单地指定 JSF 生成的 h:messages 应该使用 jQueryUI 的漂亮 ui-states 来设置样式。但遗憾的是我不能让它适合。似乎 jQueryUI 状态需要几个元素（div、div、p、span）才能使其工作。

所以直接从 jQueryUI 主题演示页面获取灵感：

<!-- Highlight / Error --> 
            <h2 class="demoHeaders">Highlight / Error</h2> 
            <div class="ui-widget"> 
                <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
                    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
                    <strong>Hey!</strong> Sample ui-state-highlight style.</p> 
                </div> 
            </div> 
            <br/> 
            <div class="ui-widget"> 
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
                    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
                    <strong>Alert:</strong> Sample ui-state-error style.</p> 
                </div> 
            </div>

并尽我所能将 css 类的详细信息塞进我的 h:message 中：

        <div class="ui-widget">
            <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/>
        </div>

我没有得到图标或足够的填充等，但颜色可以通过。因此，样式正在被应用，但它们没有按预期工作。

知道我怎样才能完成这项工作吗？

Answer 1

在该元素上，您需要一个提供display: block; 的类来获取您想要的位置特征，如下所示：

<div class="ui-widget">
  <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert block" infoClass="ui-state-highlight ui-corner-all ui-icon-info block"/>
</div>

CSS：

.block { display: block; }

如果你有兴趣，here's a listing of all the classes jQuery UI uses for CSS and what they mean。