mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-01-29 20:08:06 -05:00
Progressbar updates - using .animate()
This commit is contained in:
Eduardo Lundgren
@@ -89,7 +89,9 @@ body
|
||||
border-top:1px solid #BEBEBE;
|
||||
height:15px;
|
||||
}
|
||||
|
||||
.bold {
|
||||
color: red !important;
|
||||
}
|
||||
.ui-hidden {
|
||||
left:-10000px;
|
||||
position:absolute;
|
||||
@@ -167,24 +169,27 @@ $(function() {
|
||||
|
||||
//align: 'right',
|
||||
|
||||
wait: 'loop',
|
||||
width: 500,
|
||||
|
||||
duration: 1000,
|
||||
duration: 5000,
|
||||
|
||||
stepping: 10,
|
||||
interval: 500,
|
||||
|
||||
progress: function(range, ui) {
|
||||
increment: 300,
|
||||
|
||||
progress: function(ui) {
|
||||
//console.log(ui.pixelRange);
|
||||
//console.log(range);
|
||||
//console.log(ui);
|
||||
//ui.instance.text('Waiting...');
|
||||
},
|
||||
|
||||
stop: function(s, ui) {
|
||||
//console.log('stop:' + ui.instance.inprogress);
|
||||
stop: function(ui) {
|
||||
//console.log('user stop', ui);
|
||||
},
|
||||
|
||||
start: function() {
|
||||
console.log('user start');
|
||||
start: function(ui) {
|
||||
//console.log('user start', ui);
|
||||
console.log('p1', ui.identifier);
|
||||
}
|
||||
|
||||
});
|
||||
@@ -196,25 +201,35 @@ $(function() {
|
||||
|
||||
$('#p2').progressbar({
|
||||
|
||||
range: true,
|
||||
text: 'Testing...',
|
||||
|
||||
wait: 2000,
|
||||
//addClass: 'ui-progressbar-inner-custom teste',
|
||||
|
||||
duration:2000,
|
||||
//textClass: 'right-align',
|
||||
|
||||
stepping: 5,
|
||||
//align: 'right',
|
||||
|
||||
progress: function(range, ui) {
|
||||
width: 500,
|
||||
|
||||
duration: 5000,
|
||||
|
||||
interval: 2000,
|
||||
|
||||
increment: 50,
|
||||
|
||||
progress: function(ui) {
|
||||
//console.log(ui.pixelRange);
|
||||
//console.log(range);
|
||||
//console.log(ui);
|
||||
//ui.instance.text('Waiting...');
|
||||
},
|
||||
|
||||
stop: function(s, ui) {
|
||||
//console.log('stop:' + ui.instance.inprogress);
|
||||
stop: function(ui) {
|
||||
//console.log('user stop', ui);
|
||||
},
|
||||
|
||||
start: function() {
|
||||
//console.log('user start');
|
||||
start: function(ui) {
|
||||
//console.log('user start', ui);
|
||||
console.log('p2', ui.identifier);
|
||||
}
|
||||
|
||||
});
|
||||
@@ -222,24 +237,43 @@ $(function() {
|
||||
}).trigger("click");
|
||||
|
||||
|
||||
$('#p3-create').click(function() { $('#p3').progressbar({
|
||||
$('#p3-create').click(function() {
|
||||
|
||||
duration: 2000,
|
||||
$('#p3').progressbar({
|
||||
|
||||
stepping: 30,
|
||||
//text: 'Testing again...',
|
||||
|
||||
stop: function(s, ui) {
|
||||
console.log('stop:' + ui.instance.inProgress);
|
||||
},
|
||||
progress: function(range, ui) {
|
||||
//console.log(ui.pixelRange);
|
||||
//console.log(range);
|
||||
},
|
||||
start: function() {
|
||||
console.log('user start');
|
||||
}
|
||||
}); }).trigger('click');
|
||||
//addClass: 'ui-progressbar-inner-custom teste',
|
||||
|
||||
//textClass: 'right-align',
|
||||
|
||||
//align: 'right',
|
||||
|
||||
width: 700,
|
||||
|
||||
duration: 5000,
|
||||
|
||||
interval: 3000,
|
||||
|
||||
increment: 10,
|
||||
|
||||
progress: function(ui) {
|
||||
//console.log(ui.pixelRange);
|
||||
//console.log(ui);
|
||||
//ui.instance.text('Waiting...');
|
||||
},
|
||||
|
||||
stop: function(ui) {
|
||||
//console.log('user stop', ui);
|
||||
},
|
||||
|
||||
start: function(ui) {
|
||||
//console.log('user start', ui);
|
||||
console.log('p3', ui.identifier);
|
||||
}
|
||||
|
||||
});
|
||||
}).trigger('click');
|
||||
});
|
||||
|
||||
if(!window.console) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* jQuery UI ProgressBar
|
||||
*
|
||||
* Copyright (c) 2008 Eduardo Lundgren (braeker)
|
||||
* Copyright (c) 2008 Eduardo Lundgren
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
@@ -15,19 +15,22 @@
|
||||
$.widget("ui.progressbar", {
|
||||
init: function() {
|
||||
|
||||
var self = this, o = this.options, text = o.text ? o.text : (o.range ? '0%' : '');;
|
||||
this.element.addClass("ui-progressbar");
|
||||
|
||||
$.extend(o, {
|
||||
stepping: o.stepping > 100 ? 100 : o.stepping
|
||||
$.extend(this.options, {
|
||||
_interval: this.options.interval
|
||||
});
|
||||
|
||||
$.extend(this, {
|
||||
_step: 0,
|
||||
rangeValue: 0,
|
||||
threads: {},
|
||||
var self = this,
|
||||
options = this.options,
|
||||
id = (new Date()).getTime()+Math.random(),
|
||||
text = options.text || '0%';
|
||||
|
||||
wrapper: $('<div class="ui-progressbar-wrap"></div>'),
|
||||
this.element.addClass("ui-progressbar").width(options.width);
|
||||
|
||||
$.extend(this, {
|
||||
active: false,
|
||||
pixelState: 0,
|
||||
percentState: 0,
|
||||
identifier: id,
|
||||
bar: $('<div class="ui-progressbar-bar ui-hidden"></div>').css({
|
||||
width: '0px', overflow: 'hidden', zIndex: 100
|
||||
}),
|
||||
@@ -35,13 +38,13 @@ $.widget("ui.progressbar", {
|
||||
width: '0px', overflow: 'hidden'
|
||||
}),
|
||||
textBg: $('<div class="ui-progressbar-text ui-progressbar-text-back"></div>').html(text).css({
|
||||
width: this.element.css('width')
|
||||
})
|
||||
|
||||
width: this.element.width()
|
||||
}),
|
||||
wrapper: $('<div class="ui-progressbar-wrap"></div>')
|
||||
});
|
||||
|
||||
this.wrapper
|
||||
.append(this.bar.append(this.textElement), this.textBg)
|
||||
.append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg)
|
||||
.appendTo(this.element);
|
||||
|
||||
},
|
||||
@@ -50,10 +53,12 @@ $.widget("ui.progressbar", {
|
||||
ui: function(e) {
|
||||
return {
|
||||
instance: this,
|
||||
identifier: this.identifier,
|
||||
options: this.options,
|
||||
step: this._step,
|
||||
rangeValue: this.rangeValue,
|
||||
pixelRange: this.pixelRange
|
||||
element: this.bar,
|
||||
textElement: this.textElement,
|
||||
pixelState: this.pixelState,
|
||||
percentState: this.percentState
|
||||
};
|
||||
},
|
||||
propagate: function(n,e) {
|
||||
@@ -67,127 +72,93 @@ $.widget("ui.progressbar", {
|
||||
.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;
|
||||
if(this.inProgress) this.start();
|
||||
},
|
||||
disable: function() {
|
||||
this.element.addClass("ui-progressbar-disabled");
|
||||
this.disabled = true;
|
||||
this.clearThreads();
|
||||
},
|
||||
start: function() {
|
||||
if (this.disabled) return;
|
||||
|
||||
if (this.disabled) return false;
|
||||
this.inProgress = true;
|
||||
var self = this, options = this.options;
|
||||
|
||||
var self = this, o = this.options, el = this.element;
|
||||
this.clearThreads();
|
||||
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;
|
||||
};
|
||||
|
||||
if (typeof o.wait == 'number' && !self.waitThread)
|
||||
self.waitThread = setTimeout(function() {
|
||||
clearInterval(self.waitThread);
|
||||
self.waitThread = null;
|
||||
}, o.wait);
|
||||
|
||||
var frames = Math.ceil(100/o.stepping) || 0, ms = o.duration/frames || 0,
|
||||
|
||||
render = function(step, t) {
|
||||
//clearInterval(t);
|
||||
|
||||
self.progress(o.stepping * step);
|
||||
// on end
|
||||
if (step >= frames) {
|
||||
self.stop();
|
||||
|
||||
if (self.waitThread || o.wait == 'loop') {
|
||||
self._step = 0;
|
||||
self.start();
|
||||
this.bar.animate(
|
||||
{
|
||||
width: options.width
|
||||
},
|
||||
{
|
||||
duration: options.interval,
|
||||
easing: this.identifier,
|
||||
step: function(step, b) {
|
||||
var elapsedTime = ((new Date().getTime()) - b.startTime);
|
||||
options.interval = options._interval - elapsedTime;
|
||||
self.progress((step/options.width)*100);
|
||||
},
|
||||
complete: function() {
|
||||
delete jQuery.easing[self.identifier];
|
||||
self.stop();
|
||||
}
|
||||
}
|
||||
};
|
||||
var from = this._step, _step = (this._step - (from - 1));
|
||||
);
|
||||
|
||||
/*for(var step = from; step <= frames; step++) {
|
||||
var interval = (step - (from - 1)) * ms;
|
||||
this.threads[step] = setTimeout(render(step, this.threads[step]), interval);
|
||||
}*/
|
||||
|
||||
this.threads[0] = setInterval(function() {
|
||||
render(_step++);
|
||||
}, ms);
|
||||
|
||||
this.propagate('start');
|
||||
this.propagate('start', this.ui());
|
||||
return false;
|
||||
},
|
||||
clearThreads: function() {
|
||||
$.each(this.threads, function(s, t) { clearInterval(t); });
|
||||
this.threads = {};
|
||||
},
|
||||
stop: function() {
|
||||
|
||||
if (this.disabled) return false;
|
||||
var o = this.options, self = this;
|
||||
|
||||
this.clearThreads();
|
||||
this.propagate('stop');
|
||||
|
||||
this.inProgress = false;
|
||||
if (this.disabled) return;
|
||||
this.bar.stop();
|
||||
this.propagate('stop', this.ui());
|
||||
return false;
|
||||
|
||||
},
|
||||
reset: function() {
|
||||
|
||||
if (this.disabled) return false;
|
||||
this._step = 0;
|
||||
this.rangeValue = 0;
|
||||
this.inProgress = false;
|
||||
this.clearThreads();
|
||||
this.progress(0);
|
||||
this.bar.stop();
|
||||
this.bar.width(0);
|
||||
this.textElement.width(0);
|
||||
this.bar.addClass('ui-hidden');
|
||||
return false;
|
||||
|
||||
},
|
||||
progress: function(range) {
|
||||
|
||||
var o = this.options, el = this.element, bar = this.bar;
|
||||
if (this.disabled) return false;
|
||||
|
||||
range = parseInt(range, 10);
|
||||
this.rangeValue = this._fixRange(range);
|
||||
this.pixelRange = Math.round( ((this.rangeValue/100)||0) * (el.innerWidth() - (el.outerWidth() - el.innerWidth()) - (bar.outerWidth() - bar.innerWidth())) );
|
||||
|
||||
this.bar.removeClass('ui-hidden');
|
||||
|
||||
var css = { width: this.pixelRange + 'px' };
|
||||
this.bar.css(css);
|
||||
this.textElement.css(css);
|
||||
|
||||
if (!o.text && o.range) this.text(this.rangeValue + '%');
|
||||
this.propagate('progress', this.rangeValue);
|
||||
this.options.interval = this.options._interval;
|
||||
return false;
|
||||
},
|
||||
text: function(text) {
|
||||
this.textElement.html(text);
|
||||
},
|
||||
_fixRange: function(range) {
|
||||
var o = this.options;
|
||||
this._step = Math.ceil(range/o.stepping);
|
||||
this.rangeValue = Math.round(o.stepping * this._step);
|
||||
this.rangeValue = (this.rangeValue) >= 100 ? 100 : this.rangeValue;
|
||||
return this.rangeValue;
|
||||
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 = {
|
||||
addClass: '',
|
||||
width: 300,
|
||||
duration: 3000,
|
||||
interval: 200,
|
||||
increment: 1,
|
||||
range: true,
|
||||
stepping: 1,
|
||||
text: '',
|
||||
addClass: '',
|
||||
textClass: ''
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user