2 * jQuery Progress Bar plugin
3 * Version 1.1.0 (06/20/2008)
4 * @requires jQuery v1.2.1 or later
6 * Copyright (c) 2008 Gary Teo
10 $(".someclass").progressBar();
11 $("#progressbar").progressBar();
12 $("#progressbar").progressBar(45); // percentage
13 $("#progressbar").progressBar({showText: false }); // percentage with config
14 $("#progressbar").progressBar(45, {showText: false }); // percentage with config
18 progressBar: new function() {
22 showText : true, // show text with percentage in next to the progressbar? - default : true
23 width : 120, // Width of the progressbar - don't forget to adjust your image too!!!
24 boxImage : '/soc/content/images/progressbar.gif', // boxImage : image around the progress bar
25 barImage : '/soc/content/images/progressbg_green.gif', // Image to use in the progressbar. Can be an array of images too.
26 height : 12 // Height of the progressbar - don't forget to adjust your image too!!!
30 this.construct = function(arg1, arg2) {
31 var argpercentage = null;
44 return this.each(function(child) {
46 if (argpercentage != null && this.bar != null && this.config != null) {
47 this.config.tpercentage = argpercentage;
48 if (argconfig != null)
49 pb.config = $.extend(this.config, argconfig);
52 var config = $.extend({}, $.progressBar.defaults, argconfig);
53 var percentage = argpercentage;
54 if (argpercentage == null)
55 var percentage = $this.html().replace("%",""); // parsed percentage
59 var bar = document.createElement('img');
60 var text = document.createElement('span');
61 bar.id = this.id + "_percentImage";
62 text.id = this.id + "_percentText";
63 bar.src = config.boxImage;
64 bar.width = config.width;
71 this.config.cpercentage = 0;
72 this.config.tpercentage = percentage;
74 $bar.css("width", config.width + "px");
75 $bar.css("height", config.height + "px");
76 $bar.css("background-image", "url(" + config.barImage + ")");
77 $bar.css("padding", "0");
78 $bar.css("margin", "0");
83 bar.alt = this.tpercentage;
84 bar.title = this.tpercentage;
89 var t = setInterval(function() {
90 var config = pb.config;
91 var cpercentage = parseInt(config.cpercentage);
92 var tpercentage = parseInt(config.tpercentage);
93 var increment = parseInt(config.increment);
96 var pixels = config.width / 100; // Define how many pixels go into 1%
98 bar.css("background-position", (((config.width * -1)) + (cpercentage * pixels)) + 'px 50%');
101 text.html(" " + Math.round(cpercentage) + "%");
103 if (cpercentage > tpercentage) {
104 if (cpercentage - increment < tpercentage) {
105 pb.config.cpercentage = 0 + tpercentage
107 pb.config.cpercentage -= increment;
110 else if (pb.config.cpercentage < pb.config.tpercentage) {
111 if (cpercentage + increment > tpercentage) {
112 pb.config.cpercentage = tpercentage
114 pb.config.cpercentage += increment;
127 progressBar: $.progressBar.construct