[10358] | 1 | /* |
---|
| 2 | * jQuery Progress Bar plugin |
---|
| 3 | * Version 2.0 (06/22/2009) |
---|
| 4 | * @requires jQuery v1.2.1 or later |
---|
| 5 | * |
---|
| 6 | * Copyright (c) 2008 Gary Teo |
---|
| 7 | * http://t.wits.sg |
---|
| 8 | |
---|
| 9 | USAGE: |
---|
| 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 |
---|
| 15 | */ |
---|
| 16 | (function($) { |
---|
| 17 | $.extend({ |
---|
| 18 | progressBar: new function() { |
---|
| 19 | |
---|
| 20 | this.defaults = { |
---|
| 21 | steps : 20, // steps taken to reach target |
---|
| 22 | stepDuration : 20, |
---|
| 23 | max : 100, // Upon 100% i'd assume, but configurable |
---|
| 24 | showText : true, // show text with percentage in next to the progressbar? - default : true |
---|
| 25 | textFormat : 'percentage', // Or otherwise, set to 'fraction' |
---|
| 26 | width : 120, // Width of the progressbar - don't forget to adjust your image too!!! // Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif' |
---|
| 27 | height : 12, // Height of the progressbar - don't forget to adjust your image too!!! |
---|
| 28 | callback : null, // Calls back with the config object that has the current percentage, target percentage, current image, etc |
---|
| 29 | boxImage : 'images/progressbar.gif', // boxImage : image around the progress bar |
---|
| 30 | barImage : { |
---|
| 31 | 0: 'images/progressbg_red.gif', |
---|
| 32 | 30: 'images/progressbg_orange.gif', |
---|
| 33 | 70: 'images/progressbg_green.gif' |
---|
| 34 | }, |
---|
| 35 | |
---|
| 36 | |
---|
| 37 | // Internal use |
---|
| 38 | running_value : 0, |
---|
| 39 | value : 0, |
---|
| 40 | image : null |
---|
| 41 | }; |
---|
| 42 | |
---|
| 43 | /* public methods */ |
---|
| 44 | this.construct = function(arg1, arg2) { |
---|
| 45 | var argvalue = null; |
---|
| 46 | var argconfig = null; |
---|
| 47 | |
---|
| 48 | if (arg1 != null) { |
---|
| 49 | if (!isNaN(arg1)) { |
---|
| 50 | argvalue = arg1; |
---|
| 51 | if (arg2 != null) { |
---|
| 52 | argconfig = arg2; |
---|
| 53 | } |
---|
| 54 | } else { |
---|
| 55 | argconfig = arg1; |
---|
| 56 | } |
---|
| 57 | } |
---|
| 58 | |
---|
| 59 | return this.each(function(child) { |
---|
| 60 | var pb = this; |
---|
| 61 | var config = this.config; |
---|
| 62 | |
---|
| 63 | if (argvalue != null && this.bar != null && this.config != null) { |
---|
| 64 | this.config.value = parseInt(argvalue) |
---|
| 65 | if (argconfig != null) |
---|
| 66 | pb.config = $.extend(this.config, argconfig); |
---|
| 67 | config = pb.config; |
---|
| 68 | } else { |
---|
| 69 | var $this = $(this); |
---|
| 70 | var config = $.extend({}, $.progressBar.defaults, argconfig); |
---|
| 71 | config.id = $this.attr('id') ? $this.attr('id') : Math.ceil(Math.random() * 100000); // random id, if none provided |
---|
| 72 | |
---|
| 73 | if (argvalue == null) |
---|
| 74 | argvalue = $this.html().replace("%","") // parse percentage |
---|
| 75 | |
---|
| 76 | config.value = parseInt(argvalue); |
---|
| 77 | config.running_value = 0; |
---|
| 78 | config.image = getBarImage(config); |
---|
| 79 | |
---|
| 80 | var numeric = ['steps', 'stepDuration', 'max', 'width', 'height', 'running_value', 'value']; |
---|
| 81 | for (var i=0; i<numeric.length; i++) |
---|
| 82 | config[numeric[i]] = parseInt(config[numeric[i]]); |
---|
| 83 | |
---|
| 84 | $this.html(""); |
---|
| 85 | var bar = document.createElement('img'); |
---|
| 86 | var text = document.createElement('span'); |
---|
| 87 | var $bar = $(bar); |
---|
| 88 | var $text = $(text); |
---|
| 89 | pb.bar = $bar; |
---|
| 90 | |
---|
| 91 | $bar.attr('id', config.id + "_pbImage"); |
---|
| 92 | $text.attr('id', config.id + "_pbText"); |
---|
| 93 | $text.html(getText(config)); |
---|
| 94 | $bar.attr('title', getText(config)); |
---|
| 95 | $bar.attr('alt', getText(config)); |
---|
| 96 | $bar.attr('src', config.boxImage); |
---|
| 97 | $bar.attr('width', config.width); |
---|
| 98 | $bar.css("width", config.width + "px"); |
---|
| 99 | $bar.css("height", config.height + "px"); |
---|
| 100 | $bar.css("background-image", "url(" + config.image + ")"); |
---|
| 101 | $bar.css("background-position", ((config.width * -1)) + 'px 50%'); |
---|
| 102 | $bar.css("padding", "0"); |
---|
| 103 | $bar.css("margin", "0"); |
---|
| 104 | $this.append($bar); |
---|
| 105 | $this.append($text); |
---|
| 106 | } |
---|
| 107 | |
---|
| 108 | function getPercentage(config) { |
---|
| 109 | return config.running_value * 100 / config.max; |
---|
| 110 | } |
---|
| 111 | |
---|
| 112 | function getBarImage(config) { |
---|
| 113 | var image = config.barImage; |
---|
| 114 | if (typeof(config.barImage) == 'object') { |
---|
| 115 | for (var i in config.barImage) { |
---|
| 116 | if (config.running_value >= parseInt(i)) { |
---|
| 117 | image = config.barImage[i]; |
---|
| 118 | } else { break; } |
---|
| 119 | } |
---|
| 120 | } |
---|
| 121 | return image; |
---|
| 122 | } |
---|
| 123 | |
---|
| 124 | function getText(config) { |
---|
| 125 | if (config.showText) { |
---|
| 126 | if (config.textFormat == 'percentage') { |
---|
| 127 | return " " + Math.round(config.running_value) + "%"; |
---|
| 128 | } else if (config.textFormat == 'fraction') { |
---|
| 129 | return " " + config.running_value + '/' + config.max; |
---|
| 130 | } |
---|
| 131 | } |
---|
| 132 | } |
---|
| 133 | |
---|
| 134 | config.increment = Math.round((config.value - config.running_value)/config.steps); |
---|
| 135 | if (config.increment < 0) |
---|
| 136 | config.increment *= -1; |
---|
| 137 | if (config.increment < 1) |
---|
| 138 | config.increment = 1; |
---|
| 139 | |
---|
| 140 | var t = setInterval(function() { |
---|
| 141 | var pixels = config.width / 100; // Define how many pixels go into 1% |
---|
| 142 | |
---|
| 143 | if (config.running_value > config.value) { |
---|
| 144 | if (config.running_value - config.increment < config.value) { |
---|
| 145 | config.running_value = config.value; |
---|
| 146 | } else { |
---|
| 147 | config.running_value -= config.increment; |
---|
| 148 | } |
---|
| 149 | } |
---|
| 150 | else if (config.running_value < config.value) { |
---|
| 151 | if (config.running_value + config.increment > config.value) { |
---|
| 152 | config.running_value = config.value; |
---|
| 153 | } else { |
---|
| 154 | config.running_value += config.increment; |
---|
| 155 | } |
---|
| 156 | } |
---|
| 157 | |
---|
| 158 | if (config.running_value == config.value) |
---|
| 159 | clearInterval(t); |
---|
| 160 | |
---|
| 161 | var $bar = $("#" + config.id + "_pbImage"); |
---|
| 162 | var $text = $("#" + config.id + "_pbText"); |
---|
| 163 | var image = getBarImage(config); |
---|
| 164 | if (image != config.image) { |
---|
| 165 | $bar.css("background-image", "url(" + image + ")"); |
---|
| 166 | config.image = image; |
---|
| 167 | } |
---|
| 168 | $bar.css("background-position", (((config.width * -1)) + (getPercentage(config) * pixels)) + 'px 50%'); |
---|
| 169 | $bar.attr('title', getText(config)); |
---|
| 170 | $text.html(getText(config)); |
---|
| 171 | |
---|
| 172 | if (config.callback != null && typeof(config.callback) == 'function') |
---|
| 173 | config.callback(config); |
---|
| 174 | |
---|
| 175 | pb.config = config; |
---|
| 176 | }, config.stepDuration); |
---|
| 177 | }); |
---|
| 178 | }; |
---|
| 179 | } |
---|
| 180 | }); |
---|
| 181 | |
---|
| 182 | $.fn.extend({ |
---|
| 183 | progressBar: $.progressBar.construct |
---|
| 184 | }); |
---|
| 185 | |
---|
| 186 | })(jQuery); |
---|