|
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-2024 Potix Corporation All rights reserved.
|
Processing... |