-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi, it posible implement jquery components in zk?? Not efects , this is a speedometer:
I tried with native html and change on the fly the scripts but dont worked (i unknown is it possible)
http://jacob-king.com/demo/speedometer
Thanks
Zippy,
Here is how I got it to work:
<zk> <script src="/jq/scripts/jquery.speedometer.js" /> <script src="/jq/scripts/excanvas.js" /> <script type="text/javascript"> function initSpeedo(compId){ compId = '#' + compId; jQuery(compId).speedometer(); } function changeSpeedo(compId, inputPercent){ compId = '#' + compId; jQuery(compId).speedometer({ percentage: $('.speedometer').val() || inputPercent }); } </script> <window> <separator height="25px"/> <div id="speedo"> <attribute name="onCreate"> String initCommand = "initSpeedo('" + speedo.getUuid() + "')"; Clients.evalJavaScript(initCommand); </attribute> </div> <intbox width="25px" id="val" onCreate="self.setValue(0)" style="text-align: center;" constraint="no negative"> <attribute name="onChange"> if(self.getValue() > 100) { self.setValue(100); } </attribute> </intbox> <button label="Update"> <attribute name="onClick"> String changeCommand = "changeSpeedo('" + speedo.getUuid() + "', '" + val.getValue() + "')"; Clients.evalJavaScript(changeCommand); </attribute> </button> </window> </zk>
Make sure you take note in the JavaScript where it looks for the file "background.jpg" in order to render correctly...
Hope that helps,
Todd
:O , i have issue
I changed <attribute name="onClick"> for onCreate and the code fail ...
Its a bug?? wrong call?
<button label="Update"> <attribute name="onCreate"> String changeCommand = "changeSpeedo('" + speedo.getUuid() + "', '" + val.getValue() + "')"; Clients.evalJavaScript(changeCommand); </attribute> </button>
Zippy,
What are you trying to achieve? You wouldn't want to use the onCreate command for updates because that event only gets executed once (which is why I used it on the initialization code).
There are two main parts to my example - the first is the initialization which gets jQuery to render the speedo. The next is catching the onClick event in ZK which then updates the speedo via jQuery.
Let me know what you are trying to do and I'll do my best to help.
Todd
<div id="speedo"> <attribute name="onCreate"> String initCommand = "initSpeedo('" + speedo.getUuid() + "')"; Clients.evalJavaScript(initCommand); </attribute> </div>
Hmmm, that is the exact code that works fine for me.
When you say it doesn't initialize, do you mean that it doesn't show the speedo at all? If that is the case, I suspect the issue is where the background.jpg file is in your project.
You might also verify that the path to your JavaScript libraries are correct.
Todd
Asked: 2011-07-14 12:15:57 +0800
Seen: 760 times
Last updated: Jul 20 '11