问题
I need to implement (vertical slide in) show effect on a output panel when there is a focus on a textbox. (Initially the outputPanel should not be visible on screen, but when there is a focus on the input box, the outputPanel must show up with a slide in effect.)
<p:inputTextarea>
<p:effect event="focus" for="inputPanel" type="slide"/>
</p:inputTextarea>
<p:outputPanel id="inputPanel" style="display: none;" >
......
</p:outputPanel>
Using:
Primefaces 3.0 M3 Snapshot
JSF 2.0 with Facelets
回答1:
You can find the PrimeFaces guide here.
Use f:param
to provide parameters to configure the animation.
Check this JQuery Docs to learn about the parameters for the effects.
<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>
Also for the <p:outputPanel
specify the attribute layout
with the value of "block"
to make PrimeFaces render a DIV
instead of SPAN
because the default value for layout
attribute is "inline"
.
来源:https://stackoverflow.com/questions/7103226/show-up-a-panel-with-slide-effect-when-there-is-focus-on-specific-input-box