Iam creating a timer widget. Now I want to add a callback when the timer starts.
This is the code of the widget.
(function($, undefined) {
var timer = null;
var timervalue = [0, 0, 0, 0, 0, 0, 0, 0, 1];
$.widget('ui.timer', {
options: {
showDays: null,
showHours: null,
showMinutes: null,
showSeconds: null,
separator: ':',
showLabels: null,
labels: ['Days', 'Hours', 'Minutes', 'Seconds'],
isReverseCounter: true,
getTimer: null,
onStart: null
},
_create: function() {
console.log($.ui.timer);
$(this.element).bind('onStart', function(event, ui) {
});
$(this.element).width(0);
$(this.element).addClass('ui-widget ui-widget-header ui-timer');
if(this.options.showDays) {
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$(this.element).width($(this.element).width() + 198);
}
if(this.options.showHours) {
if(this.options.showDays) {
$('<div class="ui-timer-separator-container"><label class="ui-timer-separator">' + this.options.separator + '</label></div>').appendTo(this.element);
}
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$(this.element).width($(this.element).width() + 132);
}
if(this.options.showMinutes) {
if(this.options.showHours) {
$('<div class="ui-timer-separator-container"><label class="ui-timer-separator">' + this.options.separator + '</label></div>').appendTo(this.element);
}
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$(this.element).width($(this.element).width() + 132);
}
if(this.options.showSeconds) {
if(this.options.showMinutes) {
$('<div class="ui-timer-separator-container"><label class="ui-timer-separator">' + this.options.separator + '</label></div>').appendTo(this.element);
}
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$('<div class="ui-widget ui-widget-content ui-timer-content">0</div>').appendTo(this.element);
$(this.element).width($(this.element).width() + 132);
}
if(this.options.showLabels) {
$('<div class="ui-timer-labelPanel"></div>').appendTo(this.element);
var labelPanel = $(this.element).find('.ui-timer-labelPanel');
if(this.options.showDays) {
$('<label class="ui-timer-label">' + this.options.labels[0] + '</label>').width(176).appendTo(labelPanel);
}
if(this.options.showHours) {
$('<label class="ui-timer-label" style="margin-left:20px;">' + this.options.labels[1] + '</label>').width(112).appendTo(labelPanel);
}
if(this.options.showMinutes) {
$('<label class="ui-timer-label">' + this.options.labels[2] + '</label>').appendTo(labelPanel);
}
if(this.options.showSeconds) {
$('<label class="ui-timer-label">' + this.options.labels[3] + '</label>').appendTo(labelPanel);
}
}
},
_init: function() {
},
_start: function() {
$(this.element).trigger('onStart',{ date: new Date()});
if(this.options.isReverseCounter) {
}
else {
setInterval(function() {
$('.ui-timer-separator').fadeOut();
$('.ui-timer-separator').fadeIn();
}, 1000);
timer = setInterval(function() {
$('.ui-timer-content:last').text(timervalue[5]);
$($('.ui-timer-content')[$('.ui-timer-content').length - 2]).text(timervalue[4]);
$($('.ui-timer-content')[$('.ui-timer-content').length - 3]).text(timervalue[3]);
$($('.ui-timer-content')[$('.ui-timer-content').length - 4]).text(timervalue[2]);
$($('.ui-timer-content')[$('.ui-timer-content').length - 5]).text(timervalue[1]);
$($('.ui-timer-content')[$('.ui-timer-content').length - 6]).text(timervalue[0]);
timervalue[5] += 1;
if(timervalue[5] == 10) {
timervalue[5] = 0;
timervalue[4]++;
if(timervalue[4] == 6) {
timervalue[4] = 0;
timervalue[3]++;
if(timervalue[3] == 10) {
timervalue[3] = 0;
timervalue[2]++;
if(timervalue[2] == 6) {
timervalue[2] = 0;
timervalue[1]++;
if(timervalue[1] == 10) {
timervalue[1] = 0;
timervalue[0]++;
if(timervalue[1] == 4 && timervalue[2] == 2) {
timervalue[0] = 0;
timervalue[1] = 0;
timervalue[2] = 0;
timervalue[3] = 0;
timervalue[4] = 0;
timervalue[5] = 0;
}
}
}
}
}
}
}, 1000);
}
},
widget: function() {
},
destroy: function() {
},
_setOption: function(key, value) {
},
refresh: function() {
},
start: function() {
this._start();
},
stop: function() {
clearTimeout(timer);
$('.ui-timer-separator').stop();
},
reset: function() {
},
pause: function() {
}
});
})(jQuery);
I try using the bind method and the trigger but nothing happened.
This is a sample of what I am trying to do following this link
Use the
_triggermethod.I updated your fiddle to show this – http://jsfiddle.net/tppSr/.