mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
progressbar refactor
This commit is contained in:
Richard Worth
parent
6c93b4e2f0
commit
d55c733e41
@ -6,289 +6,40 @@
|
|||||||
<title>ProgressBar Test Page</title>
|
<title>ProgressBar Test Page</title>
|
||||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
<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.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/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>
|
</style>
|
||||||
|
|
||||||
|
<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>
|
</head>
|
||||||
<body >
|
<body>
|
||||||
|
|
||||||
|
<ul class="plugins">
|
||||||
|
<li>
|
||||||
|
Progressbar
|
||||||
|
<div id="progressbar1"></div>
|
||||||
|
<hr>
|
||||||
|
<div id="progressbar2"></div>
|
||||||
|
<hr>
|
||||||
|
<div id="progressbar3"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -16,197 +16,170 @@ $.widget("ui.progressbar", {
|
|||||||
|
|
||||||
_init: function() {
|
_init: function() {
|
||||||
|
|
||||||
this._interval = this.options.interval;
|
|
||||||
|
|
||||||
var self = this,
|
var self = this,
|
||||||
options = this.options,
|
options = this.options;
|
||||||
identifier = 'progressbar' + (++$.ui.progressbar.uuid),
|
|
||||||
text = options.text || '0%';
|
|
||||||
|
|
||||||
this.element
|
this.element
|
||||||
.addClass("ui-progressbar")
|
.addClass("ui-progressbar")
|
||||||
|
.addClass("ui-progressbar-labelalign-" + this._labelAlign())
|
||||||
|
.addClass("ui-widget-content")
|
||||||
|
.addClass("ui-corner-all")
|
||||||
.width(options.width)
|
.width(options.width)
|
||||||
|
.height(options.height)
|
||||||
.attr({
|
.attr({
|
||||||
role: "progressbar",
|
role: "progressbar",
|
||||||
"aria-valuemin": 0,
|
"aria-valuemin": 0,
|
||||||
"aria-valuemax": 100,
|
"aria-valuemax": 100,
|
||||||
"aria-valuenow": 0
|
"aria-valuenow": this.options.value
|
||||||
});
|
});
|
||||||
|
|
||||||
$.extend(this, {
|
this.element
|
||||||
active: false,
|
.append('<div class="ui-progressbar-label"></div>')
|
||||||
pixelState: 0,
|
.append('<div class="ui-progressbar-value ui-state-default ui-corner-left">'
|
||||||
percentState: 0,
|
+ '<div class="ui-progressbar-label"></div>'
|
||||||
identifier: identifier
|
+ '</div>'
|
||||||
});
|
);
|
||||||
|
|
||||||
this.wrapper = $('<div class="ui-progressbar-wrap"></div>')
|
this.valueDiv = this.element.find(".ui-progressbar-value");
|
||||||
.appendTo(this.element);
|
this.valueLabel = this.valueDiv.find(".ui-progressbar-label");
|
||||||
|
this.labels = this.element.find(".ui-progressbar-label");
|
||||||
|
|
||||||
this.bar = $('<div class="ui-progressbar-bar ui-hidden"></div>')
|
this._refreshLabel();
|
||||||
.css({
|
this._refreshValue();
|
||||||
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);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
destroy: function() {
|
destroy: function() {
|
||||||
this.stop();
|
|
||||||
|
|
||||||
this.element
|
this.element
|
||||||
.removeClass("ui-progressbar ui-progressbar-disabled")
|
.removeClass("ui-progressbar")
|
||||||
.removeData("progressbar").unbind(".progressbar")
|
.removeClass("ui-progressbar-disabled")
|
||||||
.find('.ui-progressbar-wrap').remove();
|
.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");
|
||||||
|
|
||||||
delete $.easing[this.identifier];
|
this.labels.remove();
|
||||||
},
|
this.valueDiv.remove();
|
||||||
|
|
||||||
_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() {
|
disable: function() {
|
||||||
this.element.addClass("ui-progressbar-disabled");
|
|
||||||
this.disabled = true;
|
|
||||||
this.element.attr("aria-disabled", true);
|
this.element.attr("aria-disabled", true);
|
||||||
},
|
},
|
||||||
|
|
||||||
enable: function() {
|
enable: function() {
|
||||||
this.element.removeClass("ui-progressbar-disabled");
|
|
||||||
this.disabled = false;
|
|
||||||
this.element.attr("aria-disabled", false);
|
this.element.attr("aria-disabled", false);
|
||||||
},
|
},
|
||||||
|
|
||||||
pause: function() {
|
value: function(newValue) {
|
||||||
if (this.disabled) return;
|
if (arguments.length) {
|
||||||
this.bar.stop();
|
this.options.value = newValue;
|
||||||
this._trigger('pause', null, this.ui());
|
this._updateValue(newValue);
|
||||||
},
|
|
||||||
|
|
||||||
progress: function(percentState) {
|
|
||||||
this.bar.removeClass('ui-hidden');
|
|
||||||
|
|
||||||
this.percentState = percentState > 100 ? 100 : percentState;
|
|
||||||
this.pixelState = (this.percentState / 100) * this.options.width;
|
|
||||||
this.bar.width(this.pixelState);
|
|
||||||
this.textElement.width(this.pixelState);
|
|
||||||
|
|
||||||
var percent = Math.round(this.percentState);
|
|
||||||
if (this.options.range && !this.options.text) {
|
|
||||||
this._setText(percent + '%');
|
|
||||||
}
|
|
||||||
this.element.attr("aria-valuenow", percent);
|
|
||||||
this._trigger('progress', null, this.ui());
|
|
||||||
},
|
|
||||||
|
|
||||||
start: function() {
|
|
||||||
var self = this, options = this.options;
|
|
||||||
|
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$.easing[this.identifier] = function (x, t, b, c, d) {
|
var val = this.options.value;
|
||||||
var inc = options.increment,
|
if (val < 0) val = 0;
|
||||||
width = options.width,
|
if (val > 100) val = 100;
|
||||||
step = ((inc > width ? width : inc) / width),
|
|
||||||
state = Math.round(x / step) * step;
|
|
||||||
return state > 1 ? 1 : state;
|
|
||||||
};
|
|
||||||
|
|
||||||
self.active = true;
|
return val;
|
||||||
|
|
||||||
if (options.duration < options.interval) {
|
|
||||||
options.duration = options.interval;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(
|
|
||||||
function() {
|
|
||||||
self.active = false;
|
|
||||||
},
|
|
||||||
options.duration
|
|
||||||
);
|
|
||||||
|
|
||||||
this._animate();
|
|
||||||
|
|
||||||
this._trigger('start', null, this.ui());
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
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());
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_setData: function(key, value){
|
_setData: function(key, value){
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'text':
|
case 'height':
|
||||||
this._setText(value);
|
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;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
$.widget.prototype._setData.apply(this, arguments);
|
$.widget.prototype._setData.apply(this, arguments);
|
||||||
},
|
},
|
||||||
|
|
||||||
_setText: function(text){
|
//Setters
|
||||||
this.textElement.add(this.textBg).html(text);
|
_updateLabel: function(newLabel) {
|
||||||
|
this.options.label = newLabel;
|
||||||
|
this._refreshLabel();
|
||||||
},
|
},
|
||||||
|
|
||||||
ui: function() {
|
_updateLabelAlign: function(newLabelAlign) {
|
||||||
return {
|
this.options.labelAlign = newLabelAlign;
|
||||||
options: this.options,
|
this._refreshLabelAlign();
|
||||||
pixelState: this.pixelState,
|
},
|
||||||
percentState: this.percentState
|
|
||||||
};
|
_updateValue: function(newValue) {
|
||||||
|
this._refreshLabel();
|
||||||
|
this._refreshValue();
|
||||||
|
this._trigger('change', null, {});
|
||||||
|
},
|
||||||
|
|
||||||
|
//Getters
|
||||||
|
_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();
|
||||||
|
},
|
||||||
|
|
||||||
|
//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>");
|
||||||
|
},
|
||||||
|
|
||||||
|
_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, {
|
$.extend($.ui.progressbar, {
|
||||||
version: "@VERSION",
|
version: "@VERSION",
|
||||||
defaults: {
|
defaults: {
|
||||||
duration: 1000,
|
height: 20,
|
||||||
increment: 1,
|
label: true,
|
||||||
interval: 1000,
|
labelAlign: 'left',
|
||||||
range: true,
|
value: 0,
|
||||||
text: '',
|
|
||||||
width: 300
|
width: 300
|
||||||
},
|
}
|
||||||
|
|
||||||
uuid: 0
|
|
||||||
});
|
});
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user