/* * jQuery UI ProgressBar @VERSION * * Copyright (c) 2008 Eduardo Lundgren * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * http://docs.jquery.com/UI/ProgressBar * * Depends: * ui.core.js */ (function($) { $.widget("ui.progressbar", { _init: function() { this._interval = this.options.interval; var self = this, options = this.options, id = (new Date()).getTime()+Math.random(), text = options.text || '0%'; this.element.addClass("ui-progressbar").width(options.width); $.extend(this, { active: false, pixelState: 0, percentState: 0, identifier: id, bar: $('
').css({ width: '0px', overflow: 'hidden', zIndex: 100 }), textElement: $('
').html(text).css({ width: '0px', overflow: 'hidden' }), textBg: $('
').html(text).css({ width: this.element.width() }), wrapper: $('
') }); this.wrapper .append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg) .appendTo(this.element); jQuery.easing[this.identifier] = function (x, t, b, c, d) { var inc = options.increment, width = options.width, step = ((inc > width ? width : inc)/width), state = Math.round(x/step)*step; return state > 1 ? 1 : state; }; }, plugins: {}, ui: function(e) { return { identifier: this.identifier, options: this.options, element: this.bar, textElement: this.textElement, pixelState: this.pixelState, percentState: this.percentState }; }, _propagate: function(n,e) { $.ui.plugin.call(this, n, [e, this.ui()]); this.element.triggerHandler(n == "progressbar" ? n : ["progressbar", n].join(""), [e, this.ui()], this.options[n]); }, destroy: function() { this.stop(); this.element .removeClass("ui-progressbar ui-progressbar-disabled") .removeData("progressbar").unbind(".progressbar") .find('.ui-progressbar-wrap').remove(); delete jQuery.easing[this.identifier]; }, enable: function() { this.element.removeClass("ui-progressbar-disabled"); this.disabled = false; }, disable: function() { this.element.addClass("ui-progressbar-disabled"); this.disabled = true; }, start: function() { var self = this, options = this.options; if (this.disabled) { return; } self.active = true; setTimeout( function() { self.active = false; }, options.duration ); this._animate(); this._propagate('start', this.ui()); return false; }, _animate: function() { var self = this, options = this.options, interval = options.interval; this.bar.animate( { width: options.width }, { duration: interval, easing: this.identifier, step: function(step, b) { self.progress((step/options.width)*100); var elapsedTime = ((new Date().getTime()) - b.startTime); options.interval = interval - elapsedTime; }, complete: function() { delete jQuery.easing[self.identifier]; self.pause(); if (self.active) { /*TODO*/ self.stop(); self._animate(); } } } ); }, pause: function() { if (this.disabled) return; this.bar.stop(); this._propagate('pause', this.ui()); }, stop: function() { this.bar.stop(); this.bar.width(0); this.textElement.width(0); this.bar.addClass('ui-hidden'); this.options.interval = this._interval; this._propagate('stop', this.ui()); }, progress: function(percentState) { if (this.bar.is('.ui-hidden')) { this.bar.removeClass('ui-hidden'); } this.percentState = percentState > 100 ? 100 : percentState; this.pixelState = (this.percentState/100)*this.options.width; this.bar.width(this.pixelState); this.textElement.width(this.pixelState); if (this.options.range && !this.options.text) { this.textElement.html(Math.round(this.percentState) + '%'); } this._propagate('progress', this.ui()); } }); $.ui.progressbar.defaults = { width: 300, duration: 3000, interval: 200, increment: 1, range: true, text: '', addClass: '', textClass: '' }; })(jQuery);