oa/shares/jquery.progressbar/js/jquery.progressbar.js

/*
 * jQuery Progress Bar plugin
 * Version 1.1.0 (06/20/2008)
 * @requires jQuery v1.2.1 or later
 *
 * Copyright (c) 2008 Gary Teo
 * http://t.wits.sg

USAGE:
	$(".someclass").progressBar();
	$("#progressbar").progressBar();
	$("#progressbar").progressBar(45);							// percentage
	$("#progressbar").progressBar({showText: false });			// percentage with config
	$("#progressbar").progressBar(45, {showText: false });		// percentage with config
*/
(function($) {
	$.extend({
		progressBar: new function() {

			this.defaults = {
				increment	: 2,
				speed		: 15,
				showText	: true,											// show text with percentage in next to the progressbar? - default : true
				width		: 120,											// Width of the progressbar - don't forget to adjust your image too!!!
				boxImage	: '/shares/jquery.progressbar/images/progressbar.gif',						// boxImage : image around the progress bar
				barImage	: {
								0:	'/shares/jquery.progressbar/images/progressbg_red.gif',
								30: '/shares/jquery.progressbar/images/progressbg_orange.gif',
								70: '/shares/jquery.progressbar/images/progressbg_green.gif'
							},												// Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif'
				height		: 12											// Height of the progressbar - don't forget to adjust your image too!!!
			};
			
			/* public methods */
			this.construct = function(arg1, arg2) {
				var argpercentage	= null;
				var argconfig		= null;
				
				if (arg1 != null) {
					if (!isNaN(arg1)) {
						argpercentage 	= arg1;
						if (arg2 != null) {
							argconfig	= arg2; }
					} else {
						argconfig		= arg1; 
					}
				}
				
				return this.each(function(child) {
					var pb		= this;
					if (argpercentage != null && this.bar != null && this.config != null) {
						this.config.tpercentage	= argpercentage;
						if (argconfig != null)
							pb.config			= $.extend(this.config, argconfig);
					} else {
						var $this				= $(this);
						var config				= $.extend({}, $.progressBar.defaults, argconfig);
						var percentage			= argpercentage;
						if (argpercentage == null)
							var percentage		= $this.html().replace("%","");	// parsed percentage
						
						
						$this.html("");
						var bar					= document.createElement('img');
						var text				= document.createElement('span');
						bar.id 					= this.id + "_percentImage";
						text.id 				= this.id + "_percentText";
						bar.title				= percentage + "%";
						bar.alt					= percentage + "%";
						bar.src					= config.boxImage;
						bar.width				= config.width;
						var $bar				= $(bar);
						var $text				= $(text);
						
						this.bar				= $bar;
						this.ntext				= $text;
						this.config				= config;
						this.config.cpercentage	= 0;
						this.config.tpercentage	= percentage;
						
						$bar.css("width", config.width + "px");
						$bar.css("height", config.height + "px");
						$bar.css("background-image", "url(" + getBarImage(this.config.cpercentage, config) + ")");
						$bar.css("padding", "0");
						$bar.css("margin", "0");
						$this.append($bar);
						$this.append($text);
					}
					
					function getBarImage (percentage, config) {
						var image = config.barImage;
						if (typeof(config.barImage) == 'object') {
							for (var i in config.barImage) {
								if (percentage >= parseInt(i)) {
									image = config.barImage[i];
								} else { break; }
							}
						}
						return image;
					}
					
					/* modify by tangj 这个是创建进度条的愿脚本，带动画功能，但由于这个动画太耗性能，因此修改之
					 * 修改成不带动画，直接显示进度条。修改代码在本函数下方
					var t = setInterval(function() {
						var config		= pb.config;
						var cpercentage = parseInt(config.cpercentage);
						var tpercentage = parseInt(config.tpercentage);
						var increment	= parseInt(config.increment);
						var bar			= pb.bar;
						var text		= pb.ntext;
						var pixels		= config.width / 100;			// Define how many pixels go into 1%
						bar.css("background-image", "url(" + getBarImage(cpercentage, config) + ")");
						// modify by tangj 当进度条长度不是120时，会产生偏离，需要计算偏离值，因此加入 - (120 - config.width))  2012-11-07
						bar.css("background-position", (((config.width * -1)) + (cpercentage * pixels) - (120 - config.width)) + 'px 50%');
						if (config.showText)
							text.html(" " + Math.round(cpercentage) + "%");
						
						if (cpercentage > tpercentage) {
							if (cpercentage - increment  < tpercentage) {
								pb.config.cpercentage = 0 + tpercentage
							} else {
								pb.config.cpercentage -= increment;
							}
						}
						else if (pb.config.cpercentage < pb.config.tpercentage) {
							if (cpercentage + increment  > tpercentage) {
								pb.config.cpercentage = tpercentage
							} else {
								pb.config.cpercentage += increment;
							}
						} 
						else {
							clearInterval(t);
						}
					}, pb.config.speed); 
					
					*/
					var t = function() {
                        while(true){
                          //  alert(1)
                        	var config		= pb.config;
                            var cpercentage = parseInt(config.cpercentage);
                            var tpercentage = parseInt(config.tpercentage);
                            var increment	= parseInt(config.increment);
                            var bar			= pb.bar;
                            var text		= pb.ntext;
                            var pixels		= config.width / 100;			// Define how many pixels go into 1%
                            bar.css("background-image", "url(" + getBarImage(cpercentage, config) + ")");
                            // modify by tangj 当进度条长度不是120时，会产生偏离，需要计算偏离值，因此加入 - (120 - config.width))  2012-11-07
                            bar.css("background-position", (((config.width * -1)) + (cpercentage * pixels) - (120 - config.width)) + 'px 50%');
                            if (config.showText)
                                text.html(" " + Math.round(cpercentage) + "%");
                            
                            if (cpercentage > tpercentage) {
                                if (cpercentage - increment  < tpercentage) {
                                    pb.config.cpercentage = 0 + tpercentage
                                } else {
                                    pb.config.cpercentage -= increment;
                                }
                            }
                            else if (pb.config.cpercentage < pb.config.tpercentage) {
                                if (cpercentage + increment  > tpercentage) {
                                    pb.config.cpercentage = tpercentage
                                } else {
                                    pb.config.cpercentage += increment;
                                }
                            } 
                            else {
                                break;
                            }
                        }
		
					}; 
					t();
				});
			};
		}
	});
		
	$.fn.extend({
        progressBar: $.progressBar.construct
	});
	
})(jQuery);