add progress bar example
This commit is contained in:
parent
f88c60ae15
commit
23b583098e
6 changed files with 218 additions and 89 deletions
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Progressbar Demo</title
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/progress.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
|
@ -1,77 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Ox.load('UI', {debug: true}, function() {
|
||||
var cancelled = false,
|
||||
paused = false,
|
||||
width = 384,
|
||||
$progressbar = Ox.Progressbar({
|
||||
showCancelButton: true,
|
||||
showPauseButton: true,
|
||||
showPercent: true,
|
||||
showRestartButton: true,
|
||||
showTime: true,
|
||||
width: width
|
||||
})
|
||||
.css({margin: '16px'})
|
||||
.appendTo(Ox.UI.$body)
|
||||
.bindEvent({
|
||||
cancel: function() {
|
||||
cancelled = true;
|
||||
setPercent();
|
||||
},
|
||||
complete: function() {
|
||||
clearInterval(interval);
|
||||
},
|
||||
pause: function() {
|
||||
paused = true;
|
||||
setPercent();
|
||||
},
|
||||
restart: function() {
|
||||
cancelled = false;
|
||||
paused = false;
|
||||
progress = 0;
|
||||
},
|
||||
resume: function() {
|
||||
paused = false;
|
||||
}
|
||||
}),
|
||||
$status = Ox.Label({
|
||||
width: width
|
||||
})
|
||||
.css({marginLeft: '16px'})
|
||||
.appendTo(Ox.UI.$body),
|
||||
$percent = $('<div>')
|
||||
.css({float: 'left', width: '64px', fontWeight: 'bold'})
|
||||
.appendTo($status),
|
||||
$remaining = $('<div>')
|
||||
.css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
|
||||
.appendTo($status),
|
||||
progress = 0,
|
||||
i = 0,
|
||||
interval = setInterval(function() {
|
||||
if (!cancelled && !paused) {
|
||||
if (Math.random() < 0.25) {
|
||||
progress += 0.01;
|
||||
$progressbar.options({progress: progress});
|
||||
}
|
||||
if (i % 10 == 0 || progress >= 1) {
|
||||
var status = $progressbar.status();
|
||||
setPercent();
|
||||
$remaining.html('Remaining: ' + (
|
||||
status.remaining == 0 ? 'done'
|
||||
: status.remaining == Infinity ? 'unknown'
|
||||
: Ox.formatDuration(status.remaining, 'long')
|
||||
));
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}, 25);
|
||||
function setPercent() {
|
||||
$percent.html(
|
||||
Math.round($progressbar.options('progress') * 100) + '%'
|
||||
);
|
||||
}
|
||||
});
|
|
@ -6,7 +6,7 @@ Ox.load({UI: {theme: 'classic'}}, function() {
|
|||
|
||||
var $target = Ox.Element()
|
||||
.attr({id: 'target'})
|
||||
.html('click/hold/drag here')
|
||||
.html('click/hold/drag')
|
||||
.appendTo(Ox.$body),
|
||||
$log = Ox.Element()
|
||||
.attr({id: 'log'})
|
||||
|
|
37
examples/progress/css/example.css
Normal file
37
examples/progress/css/example.css
Normal file
|
@ -0,0 +1,37 @@
|
|||
.OxLabel {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
}
|
||||
.OxProgressbar, #status {
|
||||
position: absolute;
|
||||
left: 224px;
|
||||
}
|
||||
#switch {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 144px;
|
||||
}
|
||||
|
||||
#label0, #progress0 {
|
||||
top: 16px;
|
||||
}
|
||||
#label1, #progress1 {
|
||||
top: 48px;
|
||||
}
|
||||
#label2, #status {
|
||||
top: 80px;
|
||||
}
|
||||
#label3, #progress2 {
|
||||
top: 112px;
|
||||
}
|
||||
|
||||
#status > div:first-child {
|
||||
float: left;
|
||||
width: 64px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#status > div:last-child {
|
||||
float: right;
|
||||
width: 256px;
|
||||
text-align: right;
|
||||
}
|
13
examples/progress/index.html
Normal file
13
examples/progress/index.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Progress</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
167
examples/progress/js/example.js
Normal file
167
examples/progress/js/example.js
Normal file
|
@ -0,0 +1,167 @@
|
|||
/*
|
||||
This example demonstrates the mouse events that any Ox.Element fires.
|
||||
*/
|
||||
|
||||
Ox.load('UI', function() {
|
||||
|
||||
var labelWidth = 192,
|
||||
progressWidth = 384,
|
||||
$labels = [
|
||||
Ox.Label({
|
||||
title: 'Indeterminate progress bar',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'label0'})
|
||||
.appendTo(Ox.$body),
|
||||
Ox.Label({
|
||||
title: 'Progress bar with pause button',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'label1'})
|
||||
.appendTo(Ox.$body),
|
||||
Ox.Label({
|
||||
title: 'The status of the bar above',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'label2'})
|
||||
.appendTo(Ox.$body),
|
||||
Ox.Label({
|
||||
title: 'Progress bar with complete UI',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'label3'})
|
||||
.appendTo(Ox.$body),
|
||||
|
||||
],
|
||||
$progress = [
|
||||
Ox.Progressbar({
|
||||
progress: -1,
|
||||
width: progressWidth
|
||||
})
|
||||
.attr({id: 'progress0'})
|
||||
.appendTo(Ox.$body),
|
||||
Ox.Progressbar({
|
||||
showPauseButton: true,
|
||||
width: progressWidth
|
||||
})
|
||||
.attr({id: 'progress1'})
|
||||
.bindEvent({
|
||||
pause: function() {
|
||||
paused = true;
|
||||
$progress[0].options({paused: true});
|
||||
$progress[2].options({paused: true});
|
||||
setStatus();
|
||||
},
|
||||
resume: function() {
|
||||
paused = false;
|
||||
$progress[0].options({paused: false});
|
||||
$progress[2].options({paused: false});
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.$body),
|
||||
Ox.Progressbar({
|
||||
showCancelButton: true,
|
||||
showPauseButton: true,
|
||||
showPercent: true,
|
||||
showRestartButton: true,
|
||||
showTime: true,
|
||||
width: progressWidth
|
||||
})
|
||||
.attr({id: 'progress2'})
|
||||
.bindEvent({
|
||||
cancel: function() {
|
||||
cancelled = true;
|
||||
$progress[0].options({cancelled: true});
|
||||
$progress[1].options({cancelled: true});
|
||||
setStatus();
|
||||
},
|
||||
complete: function() {
|
||||
$progress[0].options({progress: 1});
|
||||
setStatus();
|
||||
},
|
||||
pause: function() {
|
||||
paused = true;
|
||||
$progress[0].options({paused: true});
|
||||
$progress[1].options({paused: true});
|
||||
setStatus();
|
||||
},
|
||||
restart: function() {
|
||||
cancelled = false;
|
||||
paused = false;
|
||||
progress = 0;
|
||||
$progress[0].options({
|
||||
cancelled: false,
|
||||
paused: false
|
||||
});
|
||||
$progress[1].options({
|
||||
cancelled: false,
|
||||
paused: false,
|
||||
progress: 0
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
paused = false;
|
||||
$progress[0].options({paused: false});
|
||||
$progress[1].options({paused: false});
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.$body)
|
||||
],
|
||||
$status = Ox.Label({
|
||||
width: progressWidth
|
||||
})
|
||||
.attr({id: 'status'})
|
||||
.appendTo(Ox.$body),
|
||||
$percent = Ox.$('<div>')
|
||||
.appendTo($status),
|
||||
$remaining = Ox.$('<div>')
|
||||
.appendTo($status),
|
||||
$button = Ox.Button({
|
||||
title: 'Switch Theme',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'switch'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
cancelled = false,
|
||||
paused = false,
|
||||
progress = 0,
|
||||
i = 0,
|
||||
interval = setInterval(function() {
|
||||
if (!cancelled && !paused) {
|
||||
if (i > 20 && Math.random() < 1/3) {
|
||||
progress += 0.01;
|
||||
$progress[1].options({progress: progress});
|
||||
$progress[2].options({progress: progress});
|
||||
setStatus();
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}, 50);
|
||||
|
||||
setStatus();
|
||||
|
||||
function setStatus() {
|
||||
var status = $progress[1].status();
|
||||
$percent.html(
|
||||
Math.round($progress[1].options('progress') * 100) + '%'
|
||||
);
|
||||
$remaining.html(
|
||||
cancelled ? 'Cancelled'
|
||||
: paused ? 'Paused'
|
||||
: status.remaining == 0 ? 'Complete'
|
||||
: 'Remaining: ' + (
|
||||
status.remaining == Infinity ? 'unknown'
|
||||
: Ox.formatDuration(status.remaining, 'long')
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
});
|
Loading…
Reference in a new issue