CSS ролловер-эффекты с RichFaces a4j: commandButton

Question

Я не видел полезного, авторитетного веб-ресурса, в котором рассказывается, как надежно включить эффекты прокрутки для a4j:commandButton элементов в содержимом JFF RichFaces.

Я нашел множество кнопок реса ресурсов, но затемкогда они начинают говорить о html, я начинаю задаваться вопросом, каков же эквивалент более поздних веб-технологий.

По сути, я хочу, чтобы мои кнопки выглядели по-разному при наведении курсора, а затем при нажатии.Я хотел бы использовать изображения, но на стороне клиента js выходит за рамки этого q.

m

Answer 1

Используйте следующие атрибуты, как в этом примере ниже, для вашего a4j:commandButton ( посмотрите полный список (v3.3.1.GA)):

<a4j:commandButton value="Submit" styleClass="ctlBtn"
                                    id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
                                    reRender="allMyOtherplaces"
                                    onmouseover="this.className='ctlBtn btnHover'"
                                    onmousedown="this.className='ctlBtn btnDown'"
                                    onmouseup="this.className='ctlBtn'"
                                    onmouseout="this.className='ctlBtn'"
                                    onclick="this.className='ctlBtn btnDown'"
                                    oncomplete="this.className='ctlBtn'" />

И создайте классы ctlBtn, btnHover и btnDown во включенном файле .css.