Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
hello i m working on a project using ZK what i need to do is pass a value from a label to a Jquery fonction to do a count down.
i need to use this plugin : www.jqueryscript.net/loading/Graphical-Circular-Timer-with-jQuery-CSS3-pietimer.html
i have tried to insert this plugin in ZK page but is not seems to work with me
i m kinda new in Jquery i didnt know how to passe a value to "timerSeconds" from a label .
here what i have tried to do so far :
<?link href="http://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css"?>
<?link rel="stylesheet" type="text/css" href="pietimer.css"?>
<zk>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pietimer.js"></script>
<script type="text/javascript" defer="true">
<![CDATA[
jq(function() {
zk('#timer').pietimer({
timerSeconds: 60,// i need to insert a label value instand of 60
color: '#234',
fill: false,
showPercentage: true,
callback: function() {
}
});
});
]]>
</script>
<div id="timer" style="margin-top:100px;"></div>
</zk>
Can u help me pls?
Here is a similar forum answer to integrate a very similar plugin.
And here is a working example with this plugin:
<?page title="Layouts Test" contentType="text/html;charset=UTF-8" ?>
<?link rel="stylesheet" type="text/css" href="/pietimer/pietimer.css" ?>
<?script src="/pietimer/jquery.pietimer.js" ?>
<zk>
<script type="text/javascript">
function startTimer(seconds) {
$("$timer").pietimer({
timerSeconds: seconds,
fill: false,
showPercentage: true,
callback: function() {
zAu.send(new zk.Event(zk.Widget.$('$winPietimer'), 'onTimerFinished', ''));
}
});
}
</script>
<window id="winPietimer" title="A fancy timer" border="normal"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('snippets.PietimerVM')"
xmlns:n="native">
<vlayout >
<hlayout valign="middle">
<label value="Number of seconds" />
<intbox value="@bind(vm.seconds)" sclass="form-control input-lg" />
<button label="Start" onClick="@command('startTimer')" sclass="btn btn-lg" />
</hlayout>
</vlayout>
<n:div id="timer" style="margin-top: 100px; font-size: 80px;" class="pietimer">
<n:div class="percent" style="display: block;">0%</n:div>
<n:div class="slice">
<n:div class="pie" style="-webkit-transform: rotate(0deg); border-color: rgb(34, 51, 68);">
</n:div>
</n:div>
</n:div>
</window>
</zk>
And the view model:
public class PietimerVM {
private int seconds;
@AfterCompose
public void doAfterCompose(@ContextParam(ContextType.VIEW) Component view){
Selectors.wireComponents(view, this, false);
Selectors.wireEventListeners(view, this);
}
public int getSeconds() {return seconds;}
public void setSeconds(int seconds) {this.seconds = seconds;}
@Command
public void startTimer() {
if (seconds > 0)
Clients.evalJavaScript("startTimer(" + seconds + ");");
else
Clients.showNotification("Invalid time period");
}
@Listen("onTimerFinished = #winPietimer")
public void onCountdownFinished(Event event) {
Clients.showNotification("Server says: BOOM!!!");
}
}
Hope that helps
Costas
You can simply keep the return value from pietimer() as v1 and call v1.xxxx() to set timerSecond in setText function. If you just wanna do it at page loading, try to call zk('$echo').$().getValue() in the script block.
following is a sample to get value and set value from ZK component at client side.
<zk>
<script type="text/javascript" defer="true">
<![CDATA[
v1 = "hello world";
setText = function(text){
zk('$echo').$().setValue(text);
// invoke other functions
};
]]>
</script>
<window>
<textbox xmlns:w="http://www.zkoss.org/2005/zk/client" w:onChange="setText(this.getValue())" />
<textbox id="echo"/>
</window>
</zk>
Asked: 2014-05-29 14:34:14 +0800
Seen: 108 times
Last updated: Jun 11 '14