')
- .css({float: 'left', width: '64px', fontWeight: 'bold'})
- .appendTo($status),
- $remaining = $('
')
- .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) + '%'
- );
- }
-});
\ No newline at end of file
diff --git a/examples/mouse_events/js/example.js b/examples/mouse_events/js/example.js
index 23eb2d91..1e43eca3 100644
--- a/examples/mouse_events/js/example.js
+++ b/examples/mouse_events/js/example.js
@@ -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'})
diff --git a/examples/progress/css/example.css b/examples/progress/css/example.css
new file mode 100644
index 00000000..ce679eeb
--- /dev/null
+++ b/examples/progress/css/example.css
@@ -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;
+}
\ No newline at end of file
diff --git a/examples/progress/index.html b/examples/progress/index.html
new file mode 100644
index 00000000..dba8cc45
--- /dev/null
+++ b/examples/progress/index.html
@@ -0,0 +1,13 @@
+
+
+
+
Progress
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/progress/js/example.js b/examples/progress/js/example.js
new file mode 100644
index 00000000..dd33c299
--- /dev/null
+++ b/examples/progress/js/example.js
@@ -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.$('
')
+ .appendTo($status),
+ $remaining = Ox.$('
')
+ .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')
+ )
+ );
+ }
+
+});