more progress on progress bar
This commit is contained in:
parent
16ef28d260
commit
12423e7b03
5 changed files with 220 additions and 51 deletions
|
|
@ -1,36 +1,57 @@
|
|||
Ox.load('UI', {debug: true, theme: 'modern'}, function() {
|
||||
Ox.load('UI', {debug: true}, function() {
|
||||
|
||||
var $progressbar = Ox.Progressbar()
|
||||
var paused = false,
|
||||
width = 384,
|
||||
$progressbar = Ox.Progressbar({
|
||||
showCancelButton: true,
|
||||
showPauseButton: true,
|
||||
showPercent: true,
|
||||
showTime: true,
|
||||
width: width
|
||||
})
|
||||
.css({margin: '16px'})
|
||||
.appendTo(Ox.UI.$body)
|
||||
.start(),
|
||||
.bindEvent({
|
||||
pause: function() {
|
||||
paused = true;
|
||||
},
|
||||
resume: function() {
|
||||
paused = false;
|
||||
},
|
||||
cancel: function() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}),
|
||||
$status = Ox.Label({
|
||||
width: 256
|
||||
width: width
|
||||
})
|
||||
.css({marginLeft: '16px'})
|
||||
.appendTo(Ox.UI.$body);
|
||||
$percent = $('<div>')
|
||||
.css({float: 'left', width: '60px', fontWeight: 'bold'})
|
||||
.css({float: 'left', width: '64px', fontWeight: 'bold'})
|
||||
.appendTo($status);
|
||||
$remaining = $('<div>')
|
||||
.css({float: 'left', width: '180px', textAlign: 'right'})
|
||||
.css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
|
||||
.appendTo($status);
|
||||
progress = 0,
|
||||
i = 0,
|
||||
interval = setInterval(function() {
|
||||
if (Math.random() < 0.25) {
|
||||
progress += 0.01;
|
||||
$progressbar.options({progress: progress});
|
||||
if (!paused) {
|
||||
if (Math.random() < 0.25) {
|
||||
progress += 0.01;
|
||||
$progressbar.options({progress: progress});
|
||||
}
|
||||
if (i % 10 == 0 || progress >= 1) {
|
||||
var status = $progressbar.status();
|
||||
$percent.html(Math.round(progress * 100) + '%');
|
||||
$remaining.html('Remaining: ' + status.remaining == Infinity
|
||||
? 'unknown' : Ox.formatDuration(status.remaining, 'long'));
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (i % 10 == 0 || progress >= 1) {
|
||||
var status = $progressbar.status();
|
||||
$percent.html(status.percent);
|
||||
$remaining.html('Remaining: ' + status.remaining);
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}, 25);
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue