Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I would like to apologize in advance if the answer is obvious, but I am struggling to understand how I can apply JQuery commands to ZK widgets that I instantiate in Java on the server side.
For example, I have a tree defined statically in ZUML code. However, all of its Treeitems are added dynamically via user interactions on the GUI. To achieve this I have to create those Treeitems in java code on the server side.
I would like to add special effects to those dynamically created Treeitem objects. Since they are not defined in a .zul file, I am wondering if it is at all possible to invoke JQuery methods from the server side?
Here is a more concrete example. I want to utilize the JQuery slide down and slide up effects for each Treeitem created dynamically. When a custom image (E.g. a down arrow) is pressed on a Treeitem, I want to show (via a JQuery slide down effect) additional input elements that can be set by the user for that treeitem. Conversely, if a user clicks on an image (E.g. an up arrow) in the slide down part of the Treeitem, the additional input elements slide back up and disappear from view.
Is this possible? If so, can you point me to any example code?
Thanking you kindly in advance,
Trevor
Hi Trevor,
I believe Client Side Programming is exactly what you are looking for. Based on your description, I would guess that you will rely on the $f() javascript method (the javascript counterpart of getFellow()) and some event listener (as in the Watch section of the guide) to achieve what you want.
Also the links in the "See Also" section could be helpful.
Regards,
Simon
I think I got my head around the client side integration functionality, thank you.
Just one final thing. In the zkdemo there is an animation example of the slide up and down effect. How can you intialise the groupbox that is being slid to be slid up by default? If I set it to invisible in ZUML code then the jQuery effect doesn't work because the component remains invisible.
Tvella,
You key to what you ask is display: none. Please consider the following:
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<window>
<div id="animateMe" style="display: none;">
<groupbox>
<caption label="Dynamic Content" />
<label value="Content to show and hide via jQuery"/>
</groupbox>
</div>
<button label="Slidedown" w:onClick="jq(this.$f('animateMe')).hide().slideDown()"/>
<button label="Slideup" w:onClick="jq(this.$f('animateMe')).show().slideUp()"/>
</window>
</zk>
Hope that is of value.
Regards,
Todd
Asked: 2010-07-26 07:53:11 +0800
Seen: 1,271 times
Last updated: Jul 28 '10