Показать панель с эффектом слайда при фокусировке на конкретном поле ввода

Question

Мне нужно реализовать эффект вертикального скольжения на панели вывода, когда есть фокус на текстовом поле. (Первоначально outputPanel не должен быть виден на экране, но когда есть фокус на поле ввода, то outputPanel должен показать с горкой в ​​силе.)

<p:inputTextarea> 
     <p:effect event="focus" for="inputPanel" type="slide"/> 
    </p:inputTextarea> 

    <p:outputPanel id="inputPanel" style="display: none;" > 
     ...... 
    </p:outputPanel> 

---

Использования:

Основные поверхности 3.0 M3 Снимок
JSF 2.0 с торцевыми опорами

Answer 1

Вы можете найти руководство PrimeFaces here.

Используйте параметры f:param, чтобы предоставить параметры для настройки анимации.

Проверьте это JQuery Docs, чтобы узнать о параметрах эффектов.

<p:inputTextarea> 
    <p:effect event="focus" for="inputPanel" type="slide"> 
     <f:param name="mode" value="'show'" /> 
     <f:param name="direction" value="'up'" /> 
    </p:effect> 
    <p:effect event="blur" for="inputPanel" type="slide"> 
     <f:param name="mode" value="'hide'" /> 
     <f:param name="direction" value="'up'" /> 
    </p:effect> 
</p:inputTextarea> 

<p:outputPanel id="inputPanel" layout="block" style="width: 400px; height: 200px; display: none;"> 
    <p:panel header="Panel inside OutputPanel" > 
     <h1>Applying effect on output-panel.</h1> 
    </p:panel> 
</p:outputPanel> 

Также для <p:outputPanel указать атрибут layout со значением "block" сделать PrimeFaces отрендерить DIV вместо SPAN, поскольку значение по умолчанию для атрибута layout"inline".