-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I want to be able to set the style of a label from black, to yellow, to black, to yellow. I have not seen any means of doing this. The timer component does not appear to be appropriate for something like this as I want it so that when a user clicks on a button, then the label changes color from black to yellow, black to yellow.
What is the solution to this? Are there any?
Hmm well, i don't see the problem. Use an autowirecomposer to get a reference on your label, add a onClick handler on the button and set the new style of the label based on whatever you want ( the style string that contain black or yellow, a boolean that indicate the state of label,...).
Check this if you don't know autowirecomposer .
Hi Tessla,
use component's setStyle() API to change style of component
Try this
<zk> <window title="My First window" border="normal" height="150px" width="200px"> <label id="myLbl" value="Some Label"> </label> <button id="myBtn" label="Change Color"> <attribute name="onClick"> <![CDATA[ myLbl.setStyle("background:red"); ]]> </attribute> </button> </window> </zk>
The problem is that only changes the color once. I want to make it so that when the user clicks on the button, the user can visibly see the background turn red, after one second, turn a different color, after one second, turn back to red, after one second, etc. So that it is like a flashing indicator. From what I can see so for this does not appear to be possible?
In essense, Im trying to see if ZK can do this:
myLbl.setStyle("background:red");
-wait one second-
myLbl.setStyle("background:yellow");
-wait one second-
myLbl.setStyle("background:red");
(stops at red)
Hi,
you can use JQuery-Animations:
Needed to post the code to Pastebin because this forum messed up with the code...
Cheers, Maik
What is the purpose of having the "xmlns:w="http://www.zkoss.org/2005/zk/client" and w:? It appears that the jquery doesnt work if I have already have a stylesheet defined for label.
Is there any alternative solution to this besides jquery?
Hi Tessla,
>>What is the purpose of having the "xmlns:w="http://www.zkoss.org/2005/zk/client" and w:?
It is explained in our client-side programming smalltalk here
>>It appears that the jquery doesnt work if I have already have a stylesheet defined for label.
I doubt that. Can you provide your sample code to reproduce this problem?
>>Is there any alternative solution to this besides jquery?
If not jquery you will have to code it in pure javascript and worry about your code browser compatibility. Otherwise using Timer component is your best bet.
Using mjablonski's code snippet, how would I make it into a function? I would like to be able to write it something like this:
<zk>
<label id="thelabel" xmlns:w="http://www.zkoss.org/2005/zk/client" value="Please click me" w:onClick="executeChange()"/>
<zscript>
executeChange() {
jq(this.$f('labelid'))
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
})})});
}
</zscript>
</zk>
you almost did that
<zk> <label id="thelabel" xmlns:w="http://www.zkoss.org/2005/zk/client" value="Please click me" w:onClick="executeChange()"/> <script> function executeChange() { jq(this.$f('labelid')) .animate({'':''}, 500, function() <(this).css({color>) .animate({'':''}, 500, function() <(this).css({color>) .animate({'':''}, 500, function() <(this).css({color>) })})}); } </script> </zk>
Asked: 2010-10-13 22:42:15 +0800
Seen: 1,330 times
Last updated: Oct 19 '10