Показать панель с эффектом слайда, когда есть фокус на конкретном поле ввода - PullRequest
Новая
       8

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

0 голосов
/ 18 августа 2011

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

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

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

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

Primefaces 3.0 M3 Снимок
JSF 2.0 с Facelets

1 Ответ

3 голосов
/ 18 августа 2011

Руководство по PrimeFaces можно найти здесь .

Используйте 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".

...