jqbar.js
4.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/*********************************************
Author : EGrappler.com
URL : http://www.egrappler.com
License: http://www.egrappler.com/license.
*********************************************/
(function ($) {
$.fn.extend({
jqbar: function (options) {
var settings = $.extend({
animationSpeed: 2000,
barLength: 200,
orientation: 'h',
barWidth: 10,
barColor: 'red',
label: ' ',
value: 100
}, options);
return this.each(function () {
var valueLabelHeight = 0;
var progressContainer = $(this);
if (settings.orientation == 'h') {
progressContainer.addClass('jqbar horizontal').append('<span class="bar-label"></span><span class="bar-level-wrapper"><span class="bar-level"></span></span><span class="bar-percent"></span>');
var progressLabel = progressContainer.find('.bar-label').html(settings.label);
var progressBar = progressContainer.find('.bar-level').attr('data-value', settings.value);
var progressBarWrapper = progressContainer.find('.bar-level-wrapper');
progressBar.css({ height: settings.barWidth, width: 0, backgroundColor: settings.barColor });
var valueLabel = progressContainer.find('.bar-percent');
valueLabel.html('0');
}
else {
progressContainer.addClass('jqbar vertical').append('<span class="bar-percent"></span><span class="bar-level-wrapper"><span class="bar-level"></span></span><span class="bar-label"></span>');
var progressLabel = progressContainer.find('.bar-label').html(settings.label);
var progressBar = progressContainer.find('.bar-level').attr('data-value', settings.value);
var progressBarWrapper = progressContainer.find('.bar-level-wrapper');
progressContainer.css('height', settings.barLength);
progressBar.css({ height: settings.barLength, top: settings.barLength, width: settings.barWidth, backgroundColor: settings.barColor });
progressBarWrapper.css({ height: settings.barLength, width: settings.barWidth });
var valueLabel = progressContainer.find('.bar-percent');
valueLabel.html('0');
valueLabelHeight = parseInt(valueLabel.outerHeight());
valueLabel.css({ top: (settings.barLength - valueLabelHeight) + 'px' });
}
animateProgressBar(progressBar);
function animateProgressBar(progressBar) {
var level = parseInt(progressBar.attr('data-value'));
if (level > 100) {
level = 100;
alert('max value cannot exceed 100 percent');
}
var w = settings.barLength * level / 100;
if (settings.orientation == 'h') {
progressBar.animate({ width: w }, {
duration: 2000,
step: function (currentWidth) {
var percent = parseInt(currentWidth / settings.barLength * 100);
if (isNaN(percent))
percent = 0;
progressContainer.find('.bar-percent').html(percent + '%');
}
});
}
else {
var h = settings.barLength - settings.barLength * level / 100;
progressBar.animate({ top: h }, {
duration: 2000,
step: function (currentValue) {
var percent = parseInt((settings.barLength - parseInt(currentValue)) / settings.barLength * 100);
if (isNaN(percent))
percent = 0;
progressContainer.find('.bar-percent').html(Math.abs(percent) + '%');
}
});
progressContainer.find('.bar-percent').animate({ top: (h - valueLabelHeight) }, 2000);
}
}
});
}
});
})(jQuery);