-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Since the animation API has been removed, I need to migrate a small piece of code to use the new JQuery based animation. Using the old action attribute and anima object, I could do this [action="onshow: anima.moveDown(#{win}, 2000)"] for a window. It would move the window down fine.
My problem is that I can't seem to find a ZK 5 equivalent event, so this doesn't work:
... <attribute w:name="onShow"> log( "::onShow: showing window" ) ; // calls Firebug's console.info(...) safely </attribute> ...
Is there a published list of events that I can hook on the client side?
Thanks,
Hi caclark,
I'm facing the exact same issue now.
Did you find the solution?
thanks
Madruga
Unfortunately, no.
Hum...
So, could any zk guru please give a light on this issue?
This effects combined produces a great eye candy web, so it's kind of important to us (we use it all over...)
Thanks
Hi Jimmy,
I've tried your sample on zk live demo, and it shows the orange box "show not defined". Not sure if it is a typo, or a bug, I've just started to play with this client side mechanism.
Now, i'm starting to understand this, and obviously I'm not...
In the below sample, I expected that the alert messages appers when I click on the show/hide buttons. But both messages appers when the page is rendered, and the buttons only show/hide the window, but no alert messages. Could you please tell me what is that I'm doing wrong?
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" > <button label="show" onClick="wnd.visible = true"/> <button label="hide" onClick="wnd.visible = false"/> <window id="wnd" title="test" visible="false" w:onshow='alert("showing myself")' w:onhide='alert("hiding myself")'/> </zk>
PS1: After getting this right I'll move onto the anima issue and bother you a litle more =]
PS2: w:onshow is different from w:onShow, is this correct?
Thank you very much for you help!
Madruga
Jimmy, I referred to those pages before I made my original post. From them, we get 3 events from example code: onFocus, onBlur, onClick. Your "onshow" example is completely lower case whereas these 3 are mixed. So, I have 2 questions:
1) are the client side event names case sensitive, and
2) From my original post: Is there a published list of events that I can hook on the client side? A comprehensive one, as opposed to having to glean a few here and there from code examples....I poked around on the jQuery site for a bit but did not find a list there, either. Maybe I just didn't look in the right place.
We will release a freshly version in the near future
it will works like this
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" > <button label="show" onClick="wnd.visible = true"/> <button label="hide" onClick="wnd.visible = false"/> <window id="wnd" title="test" visible="false" w:onShow='zk(this).slideDown(this);' w:onHide='zk(this).slideUp(this);'/> </zk>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" > <button label="show" onClick="wnd.visible = true"/> <button label="hide" onClick="wnd.visible = false"/> <window id="wnd" title="test" visible="false" w:onShow='zk(this).slideDown(this);' w:onHide='zk(this).slideUp(this);'/> </zk>
That would be great. Will it also support the long version:
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" > <button label="show" onClick="wnd.visible = true"/> <button label="hide" onClick="wnd.visible = false"/> <window id="wnd" title="test" visible="false"> <attribute w:name="onShow"> zk(this).slideDown(this) ; </attribute> <attribute w:name="onHide"> zk(this).slideUp(this) ; </attribute> </window> </zk>
patterned after the example in http://docs.zkoss.org/wiki/ZK_5.0_and_jQuery
Defining a client side event The easiest way to define a client side event is to utilize the namespace and utilize attribute tags to encase the javascript code. The following is an extract from our example, please notice that name=”onClick” is prefixed with the declared namespace in the form :name=””. <attribute w:name="onClick"> //javascript code goes here </attribute>
Hi Jimmy, thanks for the help, but I stil have a few questions, I'll be glad if you could help!
1. What is the difference of zk(this).slideDown(this) with jq(this).hide().fadeIn()? I mean, does zk(this) is a short cut for jquery, or is something totally different?
2. As Clark asked, is there a list of the animations that we could use in zk(this)/jq(this)...?
3. I've downloaded the latest FL, your sample works great, but I'm looking for the fadeIn and fadeOut effect instead of the slide. So I tried just changed slide with fade and didn't work. So I've attempted with the jquery example, and the strange thing is that the onShow works, but the onHide don't (don't know if is an zk or jquery issue). Here is my sample:
<zk xmlns:w="http://www.zkoss.org/2005/zk/client" > <button label="show" onClick="wnd.visible = true"/> <button label="hide" onClick="wnd.visible = false"/> <window id="wnd" title="test" visible="false" w:onShow='jq(this).hide().fadeIn();' w:onHide='jq(this).show().fadeOut();'/> </zk>
Thank you for the help, and sorry for all these questions..
1. What is the difference of zk(this).slideDown(this) with jq(this).hide().fadeIn()? I mean, does zk(this) is a short cut for jquery, or is something totally different?
call the zk(this).slideDown(this) will make some process such as onSize, onShow for sync the size
but jq(this).hide().fadeIn() just the jquery function, it will not call onShow to sync the size
2. As Clark asked, is there a list of the animations that we could use in zk(this)/jq(this)...?
We are building the jsdoc, you can find it in API Reference in the near future
3. I've downloaded the latest FL, your sample works great, but I'm looking for the fadeIn and fadeOut effect instead of the slide. So......
I try your sample in zkdemo, it works well, Do you mean the window will not close ?
Asked: 2009-11-29 22:16:01 +0800
Seen: 2,555 times
Last updated: May 27 '16