0

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>

アイコンや十分なパディングなどは得られませんが、色は通り抜けます。そのため、スタイルは適用されていますが、意図したとおりに機能していません。

どうすればこれを機能させることができますか？

4

1 に答える 1

0

その要素には、次のように、必要な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; }

また、興味がある場合は、jQuery UI が CSS に使用するすべてのクラスとその意味のリストを次に示します。

于 2010-05-19T02:32:50.760 に答える