zk jquery 사용

jQuery_effects.zul:

<?page title="Jquery" contentType="text/html;charset=UTF-8"?>

<z:zk xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

        xmlns:z="http://www.zkoss.org/2005/zul" 

        xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul">

<z:hlayout width="600px">

    <z:separator width="150px"/>

    <z:window id="testWin" title="This is a Window" border="normal" width="300px">

        <z:vlayout style="text-align:center;">

            <z:image src="/images/green.png"/>

            jQuery Effect Test

        </z:vlayout>

        

    </z:window>

    

    <z:window>

        <z:include src="jQuery_effects_ctrl.zul"/>

    </z:window>

</z:hlayout>

</z:zk>

jQuery_effects_ctrl.zul:

<?page title="Jquery" contentType="text/html;charset=UTF-8"?>

<z:zk xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

        xmlns:z="http://www.zkoss.org/2005/zul" 

        xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul">

<z:groupbox closable="false" sclass="z-demo-config" xmlns:zk='client'>

    <z:caption label="Effect" />

    <z:vlayout>

        <z:button height="30px" width="100%" label="Slide Down" 

            zk:onClick="jq('$testWin').hide().slideDown(1000)" />

        <z:button height="30px" width="100%" label="Slide Up" 

            zk:onClick="jq('$testWin').show().slideUp(1000)" />

        <z:button height="30px" width="100%" label="Fade In" 

            zk:onClick="jq('$testWin').hide().fadeIn()" />

        <z:button height="30px" width="100%" label="Fade Out" 

            zk:onClick="jq('$testWin').show().fadeOut()" />

        <z:button height="30px" width="100%" label="Slide Toggle" 

            zk:onClick="jq('$testWin').slideToggle(1000)" />

    </z:vlayout>

</z:groupbox>

</z:zk>