border-top:1px solid #BEBEBE;\r
height:15px;\r
}\r
-\r
+.bold {\r
+ color: red !important;\r
+}\r
.ui-hidden {\r
left:-10000px;\r
position:absolute;\r
\r
//align: 'right',\r
\r
- wait: 'loop',\r
+ width: 500,\r
\r
- duration: 1000,\r
+ duration: 5000,\r
\r
- stepping: 10,\r
+ interval: 500,\r
\r
- progress: function(range, ui) {\r
+ increment: 300,\r
+\r
+ progress: function(ui) {\r
//console.log(ui.pixelRange);\r
- //console.log(range);\r
+ //console.log(ui);\r
//ui.instance.text('Waiting...');\r
},\r
\r
- stop: function(s, ui) {\r
- //console.log('stop:' + ui.instance.inprogress);\r
+ stop: function(ui) {\r
+ //console.log('user stop', ui);\r
},\r
\r
- start: function() {\r
- console.log('user start');\r
+ start: function(ui) {\r
+ //console.log('user start', ui);\r
+ console.log('p1', ui.identifier);\r
}\r
\r
});\r
\r
$('#p2').progressbar({\r
\r
- range: true,\r
+ text: 'Testing...',\r
+\r
+ //addClass: 'ui-progressbar-inner-custom teste',\r
+\r
+ //textClass: 'right-align',\r
\r
- wait: 2000,\r
+ //align: 'right',\r
\r
- duration:2000,\r
+ width: 500,\r
\r
- stepping: 5,\r
+ duration: 5000,\r
\r
- progress: function(range, ui) {\r
+ interval: 2000,\r
+\r
+ increment: 50,\r
+\r
+ progress: function(ui) {\r
//console.log(ui.pixelRange);\r
- //console.log(range);\r
+ //console.log(ui);\r
+ //ui.instance.text('Waiting...');\r
},\r
\r
- stop: function(s, ui) {\r
- //console.log('stop:' + ui.instance.inprogress);\r
+ stop: function(ui) {\r
+ //console.log('user stop', ui);\r
},\r
\r
- start: function() {\r
- //console.log('user start');\r
+ start: function(ui) {\r
+ //console.log('user start', ui);\r
+ console.log('p2', ui.identifier);\r
}\r
\r
});\r
}).trigger("click");\r
\r
\r
- $('#p3-create').click(function() { $('#p3').progressbar({\r
+ $('#p3-create').click(function() {\r
\r
- duration: 2000,\r
+ $('#p3').progressbar({\r
\r
- stepping: 30,\r
+ //text: 'Testing again...',\r
\r
- stop: function(s, ui) {\r
- console.log('stop:' + ui.instance.inProgress);\r
- },\r
- progress: function(range, ui) {\r
- //console.log(ui.pixelRange);\r
- //console.log(range);\r
- },\r
- start: function() {\r
- console.log('user start');\r
- }\r
- }); }).trigger('click');\r
+ //addClass: 'ui-progressbar-inner-custom teste',\r
\r
+ //textClass: 'right-align',\r
+\r
+ //align: 'right',\r
+\r
+ width: 700,\r
+\r
+ duration: 5000,\r
+\r
+ interval: 3000,\r
+\r
+ increment: 10,\r
+\r
+ progress: function(ui) {\r
+ //console.log(ui.pixelRange);\r
+ //console.log(ui);\r
+ //ui.instance.text('Waiting...');\r
+ },\r
+\r
+ stop: function(ui) {\r
+ //console.log('user stop', ui);\r
+ },\r
+\r
+ start: function(ui) {\r
+ //console.log('user start', ui);\r
+ console.log('p3', ui.identifier);\r
+ }\r
+\r
+ });\r
+ }).trigger('click');\r
});\r
\r
if(!window.console) {\r
/*\r
* jQuery UI ProgressBar\r
*\r
- * Copyright (c) 2008 Eduardo Lundgren (braeker)\r
+ * Copyright (c) 2008 Eduardo Lundgren\r
* Dual licensed under the MIT (MIT-LICENSE.txt)\r
* and GPL (GPL-LICENSE.txt) licenses.\r
*\r
$.widget("ui.progressbar", {\r
init: function() {\r
\r
- var self = this, o = this.options, text = o.text ? o.text : (o.range ? '0%' : '');;\r
- this.element.addClass("ui-progressbar");\r
-\r
- $.extend(o, {\r
- stepping: o.stepping > 100 ? 100 : o.stepping\r
+ $.extend(this.options, {\r
+ _interval: this.options.interval\r
});\r
\r
- $.extend(this, {\r
- _step: 0,\r
- rangeValue: 0,\r
- threads: {},\r
+ var self = this,\r
+ options = this.options,\r
+ id = (new Date()).getTime()+Math.random(),\r
+ text = options.text || '0%';\r
\r
- wrapper: $('<div class="ui-progressbar-wrap"></div>'),\r
+ this.element.addClass("ui-progressbar").width(options.width);\r
+\r
+ $.extend(this, {\r
+ active: false,\r
+ pixelState: 0,\r
+ percentState: 0,\r
+ identifier: id,\r
bar: $('<div class="ui-progressbar-bar ui-hidden"></div>').css({\r
width: '0px', overflow: 'hidden', zIndex: 100\r
}),\r
width: '0px', overflow: 'hidden'\r
}),\r
textBg: $('<div class="ui-progressbar-text ui-progressbar-text-back"></div>').html(text).css({\r
- width: this.element.css('width')\r
- })\r
-\r
+ width: this.element.width()\r
+ }),\r
+ wrapper: $('<div class="ui-progressbar-wrap"></div>')\r
});\r
\r
this.wrapper\r
- .append(this.bar.append(this.textElement), this.textBg)\r
+ .append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg)\r
.appendTo(this.element);\r
\r
},\r
ui: function(e) {\r
return {\r
instance: this,\r
+ identifier: this.identifier,\r
options: this.options,\r
- step: this._step,\r
- rangeValue: this.rangeValue,\r
- pixelRange: this.pixelRange\r
+ element: this.bar,\r
+ textElement: this.textElement,\r
+ pixelState: this.pixelState,\r
+ percentState: this.percentState\r
};\r
},\r
propagate: function(n,e) {\r
.removeClass("ui-progressbar ui-progressbar-disabled")\r
.removeData("progressbar").unbind(".progressbar")\r
.find('.ui-progressbar-wrap').remove();\r
+\r
+ delete jQuery.easing[this.identifier];\r
},\r
enable: function() {\r
this.element.removeClass("ui-progressbar-disabled");\r
this.disabled = false;\r
- if(this.inProgress) this.start();\r
},\r
disable: function() {\r
this.element.addClass("ui-progressbar-disabled");\r
this.disabled = true;\r
- this.clearThreads();\r
},\r
start: function() {\r
+ if (this.disabled) return;\r
\r
- if (this.disabled) return false;\r
- this.inProgress = true;\r
-\r
- var self = this, o = this.options, el = this.element;\r
- this.clearThreads();\r
+ var self = this, options = this.options;\r
\r
- if (typeof o.wait == 'number' && !self.waitThread)\r
- self.waitThread = setTimeout(function() {\r
- clearInterval(self.waitThread);\r
- self.waitThread = null;\r
- }, o.wait);\r
-\r
- var frames = Math.ceil(100/o.stepping) || 0, ms = o.duration/frames || 0,\r
-\r
- render = function(step, t) {\r
- //clearInterval(t);\r
-\r
- self.progress(o.stepping * step);\r
- // on end\r
- if (step >= frames) {\r
- self.stop();\r
+ jQuery.easing[this.identifier] = function (x, t, b, c, d) {\r
+ var inc = options.increment,\r
+ width = options.width,\r
+ step = ((inc > width ? width : inc)/width),\r
+ state = Math.round(x/step)*step;\r
+ return state > 1 ? 1 : state;\r
+ };\r
\r
- if (self.waitThread || o.wait == 'loop') {\r
- self._step = 0;\r
- self.start();\r
+ this.bar.animate(\r
+ {\r
+ width: options.width\r
+ },\r
+ {\r
+ duration: options.interval,\r
+ easing: this.identifier,\r
+ step: function(step, b) {\r
+ var elapsedTime = ((new Date().getTime()) - b.startTime);\r
+ options.interval = options._interval - elapsedTime;\r
+ self.progress((step/options.width)*100);\r
+ },\r
+ complete: function() {\r
+ delete jQuery.easing[self.identifier];\r
+ self.stop();\r
}\r
}\r
- };\r
- var from = this._step, _step = (this._step - (from - 1));\r
-\r
- /*for(var step = from; step <= frames; step++) {\r
- var interval = (step - (from - 1)) * ms;\r
- this.threads[step] = setTimeout(render(step, this.threads[step]), interval);\r
- }*/\r
+ );\r
\r
- this.threads[0] = setInterval(function() {\r
- render(_step++);\r
- }, ms);\r
-\r
- this.propagate('start');\r
+ this.propagate('start', this.ui());\r
return false;\r
},\r
- clearThreads: function() {\r
- $.each(this.threads, function(s, t) { clearInterval(t); });\r
- this.threads = {};\r
- },\r
stop: function() {\r
-\r
- if (this.disabled) return false;\r
- var o = this.options, self = this;\r
-\r
- this.clearThreads();\r
- this.propagate('stop');\r
-\r
- this.inProgress = false;\r
+ if (this.disabled) return;\r
+ this.bar.stop();\r
+ this.propagate('stop', this.ui());\r
return false;\r
\r
},\r
reset: function() {\r
-\r
- if (this.disabled) return false;\r
- this._step = 0;\r
- this.rangeValue = 0;\r
- this.inProgress = false;\r
- this.clearThreads();\r
- this.progress(0);\r
+ this.bar.stop();\r
+ this.bar.width(0);\r
+ this.textElement.width(0);\r
this.bar.addClass('ui-hidden');\r
+ this.options.interval = this.options._interval;\r
return false;\r
-\r
},\r
- progress: function(range) {\r
-\r
- var o = this.options, el = this.element, bar = this.bar;\r
- if (this.disabled) return false;\r
-\r
- range = parseInt(range, 10);\r
- this.rangeValue = this._fixRange(range);\r
- this.pixelRange = Math.round( ((this.rangeValue/100)||0) * (el.innerWidth() - (el.outerWidth() - el.innerWidth()) - (bar.outerWidth() - bar.innerWidth())) );\r
-\r
- this.bar.removeClass('ui-hidden');\r
-\r
- var css = { width: this.pixelRange + 'px' };\r
- this.bar.css(css);\r
- this.textElement.css(css);\r
-\r
- if (!o.text && o.range) this.text(this.rangeValue + '%');\r
- this.propagate('progress', this.rangeValue);\r
- return false;\r
- },\r
- text: function(text) {\r
- this.textElement.html(text);\r
- },\r
- _fixRange: function(range) {\r
- var o = this.options;\r
- this._step = Math.ceil(range/o.stepping);\r
- this.rangeValue = Math.round(o.stepping * this._step);\r
- this.rangeValue = (this.rangeValue) >= 100 ? 100 : this.rangeValue;\r
- return this.rangeValue;\r
+ progress: function(percentState) {\r
+ if (this.bar.is('.ui-hidden')) {\r
+ this.bar.removeClass('ui-hidden');\r
+ }\r
+\r
+ this.percentState = percentState > 100 ? 100 : percentState;\r
+ this.pixelState = (this.percentState/100)*this.options.width;\r
+ this.bar.width(this.pixelState);\r
+ this.textElement.width(this.pixelState);\r
+\r
+ if (this.options.range && !this.options.text) {\r
+ this.textElement.html(Math.round(this.percentState) + '%');\r
+ }\r
+ this.propagate('progress', this.ui());\r
}\r
});\r
\r
$.ui.progressbar.defaults = {\r
- addClass: '',\r
+ width: 300,\r
duration: 3000,\r
+ interval: 200,\r
+ increment: 1,\r
range: true,\r
- stepping: 1,\r
text: '',\r
+ addClass: '',\r
textClass: ''\r
};\r
\r
-})(jQuery);\r
+})(jQuery);
\ No newline at end of file
projects / jquery-ui.git / commitdiff