diff options
| -rw-r--r-- | tests/visual/progressbar.html | 24 | ||||
| -rw-r--r-- | ui/ui.progressbar.js | 108 |
2 files changed, 13 insertions, 119 deletions
diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html index eba1f71dc..d5c5d97f3 100644 --- a/tests/visual/progressbar.html +++ b/tests/visual/progressbar.html @@ -1,33 +1,21 @@ <!doctype html> <html lang="en"> <head> -<meta http-equiv="Content-Language" content="en" /> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Progressbar Visual Tests</title> +<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css" /> <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.progressbar.js"></script> -<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> - <script type="text/javascript"> $(function() { $("#progressbar1").progressbar({ value: 6 }); $("#progressbar2").progressbar({ labelAlign: 'center', label: 'center' }).progressbar("option", "value", 50); $("#progressbar3").progressbar().progressbar("option", "labelAlign", "right").progressbar("value", 90.73).data("label.progressbar", "right").progressbar("option", "label", true); - $("#progressbar4").progressbar().progressbar("destroy"); - $("#progressbar5").progressbar({ value: -10 }); - $("#progressbar6").progressbar().progressbar("value", 200); + $("#progressbar4").progressbar().progressbar("disable"); + $("#progressbar5").progressbar().progressbar("disable").progressbar("destroy"); + $("#progressbar6").progressbar({ value: -10 }); + $("#progressbar7").progressbar().progressbar("value", 200); }); </script> </head> @@ -45,6 +33,8 @@ <div id="progressbar5"></div> <br> <div id="progressbar6"></div> + <br> + <div id="progressbar7"></div> </body> </html> diff --git a/ui/ui.progressbar.js b/ui/ui.progressbar.js index 37f995969..671812512 100644 --- a/ui/ui.progressbar.js +++ b/ui/ui.progressbar.js @@ -21,7 +21,6 @@ $.widget("ui.progressbar", { this.element .addClass("ui-progressbar" - + " ui-progressbar-labelalign-" + this._labelAlign() + " ui-widget-content" + " ui-corner-all") .attr({ @@ -31,21 +30,9 @@ $.widget("ui.progressbar", { "aria-valuenow": this._value() }); - 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.valueDiv = $('<div class="ui-progressbar-value ui-state-default ui-corner-left"></div>').appendTo(this.element); - this._refreshLabel(); this._refreshValue(); - this._refreshWidth(); - this._refreshHeight(); }, @@ -53,10 +40,6 @@ $.widget("ui.progressbar", { this.element .removeClass("ui-progressbar" - + " ui-progressbar-disabled" - + " ui-progressbar-labelalign-left" - + " ui-progressbar-labelalign-center" - + " ui-progressbar-labelalign-right" + " ui-widget-content" + " ui-corner-all") .removeAttr("role") @@ -66,81 +49,30 @@ $.widget("ui.progressbar", { .removeData("progressbar") .unbind(".progressbar"); - this.labels.remove(); this.valueDiv.remove(); - }, - - disable: function() { - this.element.attr("aria-disabled", true); - }, + $.widget.prototype.destroy.apply(this, arguments); - enable: function() { - this.element.attr("aria-disabled", false); }, value: function(newValue) { arguments.length && this._setData("value", newValue); + return this._value(); }, _setData: function(key, value){ switch (key) { - case 'height': - this.options.height = value; - this._refreshHeight(); - break; - case 'label': - this.options.label = value; - this._refreshLabel(); - break; - case 'labelAlign': - this.options.labelAlign = value; - this._refreshLabelAlign(); - break; case 'value': this.options.value = value; - this._refreshLabel(); this._refreshValue(); this._trigger('change', null, {}); break; - case 'width': - this.options.width = value; - break; } $.widget.prototype._setData.apply(this, arguments); }, - //Property Getters - these return valid property values without modifying options - _labelText: function() { - var labelText; - - if (this.options.label === true) { - labelText = this.value() + '%'; - } else { - labelText = this.options.label; - } - - return labelText; - }, - - _labelAlign: function() { - var labelAlign; - - switch (this.options.labelAlign.toLowerCase()) { - case 'left': - case 'center': - case 'right': - labelAlign = this.options.labelAlign; - break; - default: - labelAlign = 'left'; - } - - return labelAlign.toLowerCase(); - }, - _value: function() { var val = this.options.value; if (val < this._valueMin()) val = this._valueMin(); @@ -161,47 +93,19 @@ $.widget("ui.progressbar", { return valueMax; }, - //Refresh Methods - these refresh parts of the widget to match its current state - _refreshHeight: function() { - this.element.height(this.options.height); - }, - - _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>"); - }, - - _refreshLabelAlign: function() { - var labelAlign = this._labelAlign(); - this.element - .removeClass("ui-progressbar-labelalign-left" - + " ui-progressbar-labelalign-center" - + " ui-progressbar-labelalign-right") - .addClass("ui-progressbar-labelalign-" + labelAlign); - }, - _refreshValue: function() { var value = this.value(); + this.valueDiv[value == this._valueMax() ? 'addClass' : 'removeClass']("ui-corner-right"); this.valueDiv.width(value + '%'); this.element.attr("aria-valuenow", value); - }, - - _refreshWidth: function() { - this.element.add(this.valueLabel).width(this.options.width); } - + }); $.extend($.ui.progressbar, { version: "@VERSION", defaults: { - height: 20, - label: true, - labelAlign: 'left', - value: 0, - width: 300 + value: 0 } }); |