0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add progress bar example

Browse source
This commit is contained in:
rolux 2012-04-14 13:49:58 +02:00
parent f88c60ae15
commit 23b583098e
6 changed files with 218 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
demos/progress/index.html
View file

@ -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>

77
demos/progress/js/progress.js
View file

@ -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) + '%'
);
}
});

2
examples/mouse_events/js/example.js
View file

@ -6,7 +6,7 @@ Ox.load({UI: {theme: 'classic'}}, function() {
var $target = Ox.Element() var $target = Ox.Element()
.attr({id: 'target'}) .attr({id: 'target'})
.html('click/hold/drag here') .html('click/hold/drag')
.appendTo(Ox.$body), .appendTo(Ox.$body),
$log = Ox.Element() $log = Ox.Element()
.attr({id: 'log'}) .attr({id: 'log'})

37
examples/progress/css/example.css Normal file
View 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
View 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
View 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')
)
);
}
});