Revision history [back]

Have a sample code with jQuery here:

fade.zul:

<?xml version="1.0" encoding="UTF-8"?>

<!-- jQuery lib -->
<?script src="http://code.jquery.com/jquery-1.11.3.min.js"></script?>

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client"
    xmlns:n="http://www.zkoss.org/2005/zk/native"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">


    <window hflex="1" height="100%" border="none">


        <button label="fade out" w:onClick="myFadeOut('myDiv')"></button>
        <space width="20px" />
        <button label="fade in" w:onClick="myFadeIn('myDiv')"></button>
        <n:hr></n:hr>

        <!-- Div for fading effect -->
        <div id="myDiv" style="height: 300px; width: 400px; background-color: yellow;">Fade out / Fade in</div>
        <script>
            <![CDATA[

/**
 * Calls jquery fadeOut() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeOut(_comp){
       var comp = zk.Widget.$('$'+_comp);
       console.log(comp.uuid);
       jq('#'+comp.uuid).fadeOut(2000);
}

/**
 * Calls jquery fadeIn() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeIn(_comp){
    var comp = zk.Widget.$('$'+_comp);
    console.log(comp.uuid);
    jq('#'+comp.uuid).fadeIn(2000);
}

            ]]>
             </script>

    </window>
</zk>

best Stephan

Have a sample code with jQuery here:

fade.zul:

<?xml version="1.0" encoding="UTF-8"?>

<!-- jQuery lib -->
<?script src="http://code.jquery.com/jquery-1.11.3.min.js"></script?>

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client"
    xmlns:n="http://www.zkoss.org/2005/zk/native"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">


    <window hflex="1" height="100%" border="none">


        <button label="fade out" w:onClick="myFadeOut('myDiv')"></button>
        <space width="20px" />
        <button label="fade in" w:onClick="myFadeIn('myDiv')"></button>
        <n:hr></n:hr>

        <!-- Div for fading effect -->
        <div id="myDiv" style="height: 300px; width: 400px; background-color: yellow;">Fade out / Fade in</div>
        <script>
            <![CDATA[

/**
 * Calls jquery fadeOut() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeOut(_comp){
       var comp = zk.Widget.$('$'+_comp);
       console.log(comp.uuid);
       jq('#'+comp.uuid).fadeOut(2000);
}

/**
 * Calls jquery fadeIn() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeIn(_comp){
    var comp = zk.Widget.$('$'+_comp);
    console.log(comp.uuid);
    jq('#'+comp.uuid).fadeIn(2000);
}

            ]]>
             </script>

    </window>
</zk>

You can call the myFadeIn(); myFadeOut() function right from your controller/ViewModel too. Clients.evalJavaScript("myFadeOut('"+ divZkId + "')");

best Stephan

Have a sample code with jQuery here:

fade.zul:

<?xml version="1.0" encoding="UTF-8"?>

<!-- jQuery lib -->
<?script src="http://code.jquery.com/jquery-1.11.3.min.js"></script?>

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client"
    xmlns:n="http://www.zkoss.org/2005/zk/native"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">


    <window hflex="1" height="100%" border="none">


        <button label="fade out" w:onClick="myFadeOut('myDiv')"></button>
        <space width="20px" />
        <button label="fade in" w:onClick="myFadeIn('myDiv')"></button>
        <n:hr></n:hr>

        <!-- Div for fading effect -->
        <div id="myDiv" style="height: 300px; width: 400px; background-color: yellow;">Fade out / Fade in</div>
        <script>
            <![CDATA[

/**
 * Calls jquery fadeOut() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeOut(_comp){
       var comp = zk.Widget.$('$'+_comp);
       console.log(comp.uuid);
       jq('#'+comp.uuid).fadeOut(2000);
}

/**
 * Calls jquery fadeIn() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeIn(_comp){
    var comp = zk.Widget.$('$'+_comp);
    console.log(comp.uuid);
    jq('#'+comp.uuid).fadeIn(2000);
}

            ]]>
             </script>

    </window>
</zk>

You can call the myFadeIn(); myFadeOut() function right from your controller/ViewModel too. Clients.evalJavaScript("myFadeOut('"+ Clients.evalJavaScript("myFadeOut( ' "+ divZkId + "')");" ' )");

best Stephan