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>