|
Processing... Click the buttons on the right to show jQuery effects!
Description & Source Code
Visual effects can be handled by jQuery at the client side without making requests to the server. jQuery_effects.zul
<hlayout width="600px"> <separator width="150px"></separator> <window id="effectTarget" title="This is a Window" border="normal" width="300px"> <vlayout style="text-align:center;"> <image src="/widgets/effects/jQuery_effects/img/magic_wand_hat.png"></image> jQuery Effect Test </vlayout> </window> </hlayout> jQuery_effects_ctrl.zul
<groupbox closable="false" sclass="z-demo-config" xmlns:w='client'>
<caption label="Effect" />
<vlayout>
<button height="30px" width="100%" label="Slide Down"
w:onClick="jq('$effectTarget').hide().slideDown(1000)" />
<button height="30px" width="100%" label="Slide Up"
w:onClick="jq('$effectTarget').show().slideUp(1000)" />
<button height="30px" width="100%" label="Fade In"
w:onClick="jq('$effectTarget').hide().fadeIn()" />
<button height="30px" width="100%" label="Fade Out"
w:onClick="jq('$effectTarget').show().fadeOut()" />
<button height="30px" width="100%" label="Slide Toggle"
w:onClick="jq('$effectTarget').slideToggle(1000)" />
</vlayout>
</groupbox>
Copyright © 2005-2025 Potix Corporation All rights reserved.
|
|
Processing... |