1

Insert Jquery in ZK

asked 2014-05-29 14:34:14 +0800

elmetni gravatar image elmetni
145 7

updated 2014-05-29 14:36:29 +0800

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?

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2014-06-11 18:14:16 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-06-11 18:16:14 +0800

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

link publish delete flag offensive edit
0

answered 2014-06-11 15:53:34 +0800

JerryChen gravatar image JerryChen
1596 3
ZK Team

updated 2014-06-11 15:55:36 +0800

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>
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-05-29 14:34:14 +0800

Seen: 85 times

Last updated: Jun 11 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More