Как я могу использовать ui-состояния jQueryUI с сообщениями h: JSF2?

Question

Похоже, что очень просто указать, что сообщения h:, сгенерированные JSF, должны быть стилизованы с использованием приятных ui-состояний jQueryUI. Но, к сожалению, я не могу сделать это в форме. Похоже, что состояния 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:

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

Также, если вам интересно, вот список всех классов, которые jQuery UI использует для CSS и что они означают .