构建一个jquery ui小部件,如何创建一个回调

时间:2012-07-03 17:28:05

标签: jquery jquery-ui jquery-plugins

我创建了一个计时器小部件。现在我想在计时器启动时添加一个回调。 这是小部件的代码。

(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);

我尝试使用绑定方法和触发器但没有发生任何事情。 这是我在link

之后尝试做的一个示例

1 个答案:

答案 0 :(得分:1)

使用_trigger方法。

this._trigger('start', this);

我更新了你的小提琴以显示这一点 - http://jsfiddle.net/tppSr/