Timeswidgets

This widgets is based on jQuery Countdown Plugin from Martin Angelov. It requires metro-countdown.js.

Countdown

<div class="countdown" data-role="countdown" data-blink="false" style="font-size: 20px"></div>
<div class="countdown inverse" data-role="countdown"></div>
<div class="countdown" data-role="countdown" data-style-background="bg-lightBlue"></div>
<div class="countdown" data-role="countdown" data-style-background="bg-teal" data-style-foreground="fg-yellow"></div>
<div class="countdown" data-role="countdown" data-style-divider="fg-red"></div>

You can activate widget manually or auto with data-* api.

Activate widget with Javascript

$("#componennt_id").countdown({
    style: {
        background: string, //existing class for digit background color
        foreground: string  //existing class for digit foreground color
        divider: string  //existing class for divider foreground color
    },
    blink: true, // blink divider
    days: int, // days to alert, set stoptimer to zero, default 1
    stoptimer: string, // the string value of datetime, example '2013-07-05 12:00'
    ontick: function(d, h, m, s){...},
    onstop: function(){...}
});

Activate widget with API

<div class="countdown" data-role="countdown" data-stoptimer="2013-07-05 12:00"></div>

Events

$("#componennt_id").countdown().bind('countdownalarm', function(){...});

Times

This widget require metro-times.js.

Definition

<div class="times" data-role="times"></div>

You can activate widget manually or auto with data-* api.

Activate widget with Javascript

$("#componennt_id").times({
    style: {
        background: string, //existing class for digit background color
        foreground: string  //existing class for digit foreground color
        divider: string  //existing class for divider foreground color
    },
    blink: true, // blink divider
    alarm: {h:..., m:..., s:...},
    ontick: function(h, m, s){...},
    onalarm: function(){...},
});

Activate widget with API

<div class="times" data-role="times" data-alarm="hh:mm:ss"></div>

Events

$("#componennt_id").times().bind('timesalarm', function(){...});