aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2008-12-05 13:35:11 +0000
committerRichard Worth <rdworth@gmail.com>2008-12-05 13:35:11 +0000
commitd55c733e41ba9493126b5cb512a8dd347a1d4c31 (patch)
treeaa3c9db3c800a4f3fe326a7c2724755f2ffb432f
parent6c93b4e2f0053967dee543e7f9c89623d4864ff3 (diff)
downloadjquery-ui-d55c733e41ba9493126b5cb512a8dd347a1d4c31.tar.gz
jquery-ui-d55c733e41ba9493126b5cb512a8dd347a1d4c31.zip
progressbar refactor
Diffstat
-rw-r--r--tests/visual/progressbar.html309
-rw-r--r--ui/ui.progressbar.js270
2 files changed, 150 insertions, 429 deletions
diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html
index 6341a342f..12486a8c7 100644
--- a/tests/visual/progressbar.html
+++ b/tests/visual/progressbar.html
@@ -6,289 +6,40 @@
<title>ProgressBar Test Page</title>
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
-<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
-<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
-<script type="text/javascript" src="../../ui/effects.core.js"></script>
-
-<style type="text/css" media="all">
-
-body
-{
- background: #fff;
- font-family: Arial;
-}
-
-#log {
- right:0px;
- top:0px;
- background-color:#FAFCFE;
- border:1px solid #DFE8F6;
- height:400px;
- width:300px;
- position:absolute;
- overflow:auto;
-}
-
-/* ProgressBar */
-
-.ui-progressbar {
- width: 400px; height: 20px;
- border: 1px #ccc solid;
- background:#E0E8F3 url(../images/bg.gif) repeat-x scroll 0%;
- position:relative;
-}
-
-.ui-progressbar-wrap {
- position: relative;
- height: auto;
- width: auto;
- line-height: 18px;
- _line-height: 16px;
-}
-
-.ui-progressbar-bar {
- background:#9CBFEE url(../images/progress-bg.gif) repeat-x scroll left center;
- border-bottom:1px solid #7FA9E4;
- border-right:1px solid #7FA9E4;
- border-top:1px solid #D1E4FD;
- position: absolute;
-}
-
-.ui-progressbar-text {
- color:#fff;
- overflow: hidden;
- white-space: nowrap;
- font-size: 11px;
- font-weight: bold;
- padding-left: 5px;
-}
-
-.ui-progressbar-text-back {
- color:#000;
- padding-top: 1px;
- padding-bottom: 1px;
- padding-right: 1px;
-}
-
-.ui-progressbar-disabled {
- opacity:.5;
- filter:Alpha(Opacity=50);
-}
-
-
-/* custom */
-.ui-progressbar-text.right-align {
- text-align: right;
- padding: 0 5px 0 0;
-}
-.ui-progressbar-inner-custom {
- background: url(../images/custom-bar.gif) repeat-x scroll left center;
- border-bottom:1px solid #EFEFEF;
- border-right:0pt none;
- border-top:1px solid #BEBEBE;
- height:15px;
-}
-.bold {
- color: red !important;
-}
-.ui-hidden {
- left:-10000px;
- position:absolute;
- top:-10000px;
- visibility:hidden;
-}
+<style type="text/css">
+ .ui-progressbar { position: relative; height: 22px; border: 1px solid black; }
+ .ui-progressbar-labelalign-left { text-align: left; }
+ .ui-progressbar-labelalign-center { text-align: center; }
+ .ui-progressbar-labelalign-right { text-align: right; }
+ .ui-progressbar-label { color: black; }
+ .ui-progressbar-labelalign-left .ui-progressbar-label div { padding-left: 0.5em; }
+ .ui-progressbar-labelalign-right .ui-progressbar-label div { padding-right: 0.5em; }
+ .ui-progressbar-value { position: absolute; top: 0; background: gray; overflow: hidden; height: 100%; white-space: nowrap; }
+ .ui-progressbar-value .ui-progressbar-label { color: white; }
</style>
-</head>
-<body >
-
-<h1>jQuery - ProgressBar</h1>
-
-<div id="log">log</div>
-
-
-<div id='p1'></div><br>
-
-<button id="p1-create">Create</button>
-<button id="p1-destroy" onclick="$('#p1').progressbar('destroy');">destroy</button>
-<button id="p1-start" onclick="$('#p1').progressbar('start');">Start</button>
-<button id="p1-stop" onclick="$('#p1').progressbar('stop');">Stop</button>
-<button id="p1-stop" onclick="$('#p1').progressbar('pause');">pause</button>
-<button id="p1-enable" onclick="$('#p1').progressbar('enable');">enable</button>
-<button id="p1-disable" onclick="$('#p1').progressbar('disable');">disable</button>
-<button id="p1-progress" onclick="$('#p1').progressbar('progress', 50);">progress to 50</button>
-<button id="p1-progress" onclick="$('#p1').progressbar('text', 'Textchanged!');">Change text</button>
-
-<br><br>
-
-<div id='p2'></div><br>
-
-<button id="p2-create">Create</button>
-<button id="p2-destroy" onclick="$('#p2').progressbar('destroy');">destroy</button>
-<button id="p2-start" onclick="$('#p2').progressbar('start');">Start</button>
-<button id="p2-stop" onclick="$('#p2').progressbar('stop');">Stop</button>
-<button id="p2-stop" onclick="$('#p2').progressbar('pause');">pause</button>
-<button id="p2-enable" onclick="$('#p2').progressbar('enable');">enable</button>
-<button id="p2-disable" onclick="$('#p2').progressbar('disable');">disable</button>
-<button id="p2-progress" onclick="$('#p2').progressbar('progress', 40);">progress to 50</button>
-
-<br><br>
-
-<div id='p3'></div><br>
-
-<button id="p3-create">Create</button>
-<button id="p3-destroy" onclick="$('#p3').progressbar('destroy');">destroy</button>
-<button id="p3-start" onclick="$('#p3').progressbar('start');">Start</button>
-<button id="p3-stop" onclick="$('#p3').progressbar('stop');">Stop</button>
-<button id="p3-stop" onclick="$('#p3').progressbar('pause');">pause</button>
-<button id="p3-enable" onclick="$('#p3').progressbar('enable');">enable</button>
-<button id="p3-disable" onclick="$('#p3').progressbar('disable');">disable</button>
-<button id="p3-progress" onclick="$('#p3').progressbar('progress', $('#p3-value').val());">progress to</button>
-<input type="text" id="p3-value" value="35"/>
-
-<br><br>
-
-<button id="p2-startall" onclick="$('#p2, #p1, #p3').progressbar('start');">Start All</button>
-<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('stop');">Stop All</button>
-<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('pause');">Pause All</button>
-
-<script>
-
-$(function() {
-
- $('#p1-create').click(function() {
-
- $('#p1').progressbar({
-
- text: 'jQuery ProgressBar waiting...',
-
- //addClass: 'ui-progressbar-inner-custom teste',
-
- //textClass: 'right-align',
-
- //align: 'right',
-
- equation: 'easeOutBounce',
-
- width: 500,
-
- duration: 3000,
-
- interval: 800,
-
- increment: 1,
- 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('p1', ui.identifier);
- }
-
- });
-
- }).trigger("click");
-
-
- $('#p2-create').click(function() {
-
- $('#p2').progressbar({
-
- text: 'Testing...',
-
- //addClass: 'ui-progressbar-inner-custom teste',
-
- //textClass: 'right-align',
-
- //align: 'right',
-
- width: 500,
-
- duration: 5000,
-
- equation: 'easeInOutQuint',
-
- interval: 2000,
-
- increment: 50,
-
- 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('p2', ui.identifier);
- }
-
- });
-
- }).trigger("click");
-
-
- $('#p3-create').click(function() {
-
- $('#p3').progressbar({
-
- //text: 'Testing again...',
-
- //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) {
- window.console = {
- log: function() {
- $('#log').append(arguments[0]+"<br>");
- $('#log').scrollTop(999999);
- }
- };
-}
+<script type="text/javascript">
+ $(function() {
+ $("#progressbar1").progressbar({ value: 6 });
+ $("#progressbar2").progressbar({ labelAlign: 'center', label: 'center' });
+ $("#progressbar3").progressbar().progressbar("option", "labelAlign", "right").progressbar("value", 90).data("label.progressbar", "right");
+ });
+ </script>
+</head>
+<body>
+
+<ul class="plugins">
+<li>
+ Progressbar
+ <div id="progressbar1"></div>
+ <hr>
+ <div id="progressbar2"></div>
+ <hr>
+ <div id="progressbar3"></div>
+</li>
+</ul>
-</script>
</body>
</html>
diff --git a/ui/ui.progressbar.js b/ui/ui.progressbar.js
index a8cec0a66..7fab0acc4 100644
--- a/ui/ui.progressbar.js
+++ b/ui/ui.progressbar.js
@@ -16,197 +16,170 @@ $.widget("ui.progressbar", {
_init: function() {
- this._interval = this.options.interval;
-
var self = this,
- options = this.options,
- identifier = 'progressbar' + (++$.ui.progressbar.uuid),
- text = options.text || '0%';
+ options = this.options;
this.element
.addClass("ui-progressbar")
+ .addClass("ui-progressbar-labelalign-" + this._labelAlign())
+ .addClass("ui-widget-content")
+ .addClass("ui-corner-all")
.width(options.width)
+ .height(options.height)
.attr({
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": 100,
- "aria-valuenow": 0
+ "aria-valuenow": this.options.value
});
- $.extend(this, {
- active: false,
- pixelState: 0,
- percentState: 0,
- identifier: identifier
- });
-
- this.wrapper = $('<div class="ui-progressbar-wrap"></div>')
- .appendTo(this.element);
-
- this.bar = $('<div class="ui-progressbar-bar ui-hidden"></div>')
- .css({
- width: 0,
- overflow: 'hidden',
- zIndex: 100
- })
- .appendTo(this.wrapper);
-
- this.textElement = $('<div class="ui-progressbar-text"></div>')
- .html(text)
- .css({
- width: 0,
- overflow: 'hidden'
- })
- .appendTo(this.bar);
-
- this.textBg = $('<div class="ui-progressbar-text ui-progressbar-text-back"></div>')
- .html(text)
- .css({
- width: this.element.width()
- })
- .appendTo(this.bar);
+ this.element
+ .append('<div class="ui-progressbar-label"></div>')
+ .append('<div class="ui-progressbar-value ui-state-default ui-corner-left">'
+ + '<div class="ui-progressbar-label"></div>'
+ + '</div>'
+ );
+
+ this.valueDiv = this.element.find(".ui-progressbar-value");
+ this.valueLabel = this.valueDiv.find(".ui-progressbar-label");
+ this.labels = this.element.find(".ui-progressbar-label");
+
+ this._refreshLabel();
+ this._refreshValue();
+
},
destroy: function() {
- this.stop();
this.element
- .removeClass("ui-progressbar ui-progressbar-disabled")
- .removeData("progressbar").unbind(".progressbar")
- .find('.ui-progressbar-wrap').remove();
+ .removeClass("ui-progressbar")
+ .removeClass("ui-progressbar-disabled")
+ .removeClass("ui-progressbar-labelalign-left")
+ .removeClass("ui-progressbar-labelalign-center")
+ .removeClass("ui-progressbar-labelalign-right")
+ .removeClass("ui-widget-content")
+ .removeClass("ui-corner-all")
+ .removeData("progressbar")
+ .unbind(".progressbar");
+
+ this.labels.remove();
+ this.valueDiv.remove();
- delete $.easing[this.identifier];
- },
-
- _animate: function() {
- var self = this,
- options = this.options,
- interval = options.interval;
-
- this.bar.animate(
- {
- width: options.width
- },
- {
- duration: interval,
- easing: options.equation || this.identifier,
- step: function(step, b) {
- var timestamp = new Date().getTime(), elapsedTime = (timestamp - b.startTime);
- self.progress( (step / options.width) * 100 );
- options.interval = interval - elapsedTime;
- },
- complete: function() {
- if (self.active) {
- options.interval = self._interval;
- self.bar.width(0);
- self.textElement.width(0);
- self._animate();
- }
- else {
- delete $.easing[self.identifier];
- }
- }
- }
- );
},
disable: function() {
- this.element.addClass("ui-progressbar-disabled");
- this.disabled = true;
this.element.attr("aria-disabled", true);
},
enable: function() {
- this.element.removeClass("ui-progressbar-disabled");
- this.disabled = false;
this.element.attr("aria-disabled", false);
},
- pause: function() {
- if (this.disabled) return;
- this.bar.stop();
- this._trigger('pause', null, this.ui());
- },
+ value: function(newValue) {
+ if (arguments.length) {
+ this.options.value = newValue;
+ this._updateValue(newValue);
+ }
- progress: function(percentState) {
- this.bar.removeClass('ui-hidden');
+ var val = this.options.value;
+ if (val < 0) val = 0;
+ if (val > 100) val = 100;
- this.percentState = percentState > 100 ? 100 : percentState;
- this.pixelState = (this.percentState / 100) * this.options.width;
- this.bar.width(this.pixelState);
- this.textElement.width(this.pixelState);
+ return val;
+ },
- var percent = Math.round(this.percentState);
- if (this.options.range && !this.options.text) {
- this._setText(percent + '%');
+ _setData: function(key, value){
+ switch (key) {
+ case 'height':
+ this.element.height(value);
+ break;
+ case 'label':
+ this._updateLabel(value);
+ break;
+ case 'labelAlign':
+ this._updateLabelAlign(value);
+ break;
+ case 'label':
+ this._updateValue(value);
+ break;
+ case 'value':
+ this.value(value);
+ break;
+ case 'width':
+ this.element.add(this.valueLabel).width(this.options.width);
+ break;
}
- this.element.attr("aria-valuenow", percent);
- this._trigger('progress', null, this.ui());
+
+ $.widget.prototype._setData.apply(this, arguments);
},
- start: function() {
- var self = this, options = this.options;
+ //Setters
+ _updateLabel: function(newLabel) {
+ this.options.label = newLabel;
+ this._refreshLabel();
+ },
- if (this.disabled) {
- return;
- }
+ _updateLabelAlign: function(newLabelAlign) {
+ this.options.labelAlign = newLabelAlign;
+ this._refreshLabelAlign();
+ },
- $.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;
- };
+ _updateValue: function(newValue) {
+ this._refreshLabel();
+ this._refreshValue();
+ this._trigger('change', null, {});
+ },
- self.active = true;
+ //Getters
+ _labelText: function() {
+ var labelText;
- if (options.duration < options.interval) {
- options.duration = options.interval;
+ if (this.options.label === true) {
+ labelText = this.value() + '%';
+ } else {
+ labelText = this.options.label;
}
- setTimeout(
- function() {
- self.active = false;
- },
- options.duration
- );
-
- this._animate();
-
- this._trigger('start', null, this.ui());
- return false;
+ return labelText;
},
- stop: function() {
- this.bar.stop();
- this.bar.width(0);
- this.textElement.width(0);
- this.bar.addClass('ui-hidden');
- this.options.interval = this._interval;
- this._trigger('stop', null, this.ui());
- },
+ _labelAlign: function() {
+ var labelAlign;
- _setData: function(key, value){
- switch (key) {
- case 'text':
- this._setText(value);
+ switch (this.options.labelAlign.toLowerCase()) {
+ case 'left':
+ case 'center':
+ case 'right':
+ labelAlign = this.options.labelAlign;
break;
+ default:
+ labelAlign = 'left';
}
- $.widget.prototype._setData.apply(this, arguments);
+ return labelAlign.toLowerCase();
},
- _setText: function(text){
- this.textElement.add(this.textBg).html(text);
+ //Methods
+ _refreshLabel: function() {
+ var labelText = this._labelText();
+
+ // this extra wrapper div is required for padding to work with labelAlign: left and labelAlign: right
+ this.labels.html("<div>" + labelText + "</div>");
},
- ui: function() {
- return {
- options: this.options,
- pixelState: this.pixelState,
- percentState: this.percentState
- };
+ _refreshLabelAlign: function() {
+ var labelAlign = this._labelAlign();
+ this.element
+ .removeClass("ui-progressbar-labelalign-left")
+ .removeClass("ui-progressbar-labelalign-center")
+ .removeClass("ui-progressbar-labelalign-right")
+ .addClass("ui-progressbar-labelalign-" + labelAlign);
+ },
+
+ _refreshValue: function() {
+ var val = this.value();
+ this.valueDiv.width(val + '%');
+ this.element.attr("aria-valuenow", val);
}
});
@@ -214,15 +187,12 @@ $.widget("ui.progressbar", {
$.extend($.ui.progressbar, {
version: "@VERSION",
defaults: {
- duration: 1000,
- increment: 1,
- interval: 1000,
- range: true,
- text: '',
+ height: 20,
+ label: true,
+ labelAlign: 'left',
+ value: 0,
width: 300
- },
-
- uuid: 0
+ }
});
})(jQuery);
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-23 19:13:15 +0000