一个进度条

项目中需要一个进度条，要求是能处理点击事件

js代码

(function($) {
	//Main Method
	$.fn.reportprogress = function(val,_handler, maxVal) {
		var handler = _handler;
		
		var max = 100;
		if (maxVal)
			max = maxVal;
		return this.each(function() {
					
					var div = $(this);
					var innerdiv = div.find(".progress");

					/*如果最先在div中不存在两个单独的我们需要的div，就把我们需要的单独的div新建起来*/
					if (innerdiv.length != 1) {
						innerdiv = $("<div class='progress'></div>");
						div.append("<div class='text'>&nbsp;</div>");
						$("<span id='progress-text' class='text'>&nbsp;</span>").css("width",
								div.width()).appendTo(innerdiv);
						div.append(innerdiv);
					}
					/*设置那两个新增div的属性*/
					var width = Math.round(val / max * 100);
					innerdiv.css("width", width/100*160 + "px");
					div.find(".text").html(width + " %");
					
					div.unbind("click");
					div.click(fun);
					
					div.unbind("mouseover");
					div.mouseover(function (){div.css("cursor","text");});
					
					div.unbind("mouseout");
					div.mouseout(function (){div.css("cursor","default");});
					
					function fun(event){
				//		alert("left:"+ div[0].offsetLeft+"width:"+div[0].offsetWidth);
				//		alert("click left:" + event.clientX);
						var width = Math.round((event.clientX - div.offset().left)/(div[0].offsetWidth-2)*100);
						if(width > 100){
							return;
						}
						innerdiv.css("width", width + "%");
						div.find(".text").html(width + " %");
						handler(width);
						//alert('here');
					}
				});
	};
})(jQuery);

 

css代码

#progressbar {
	BORDER-RIGHT: black 1px solid;
	BORDER-TOP: black 1px solid;
	BORDER-LEFT: black 1px solid;
	WIDTH: 160px;
	COLOR: black;
	BORDER-BOTTOM: black 1px solid;
	POSITION: relative;
	HEIGHT: 20px
}

#progressbar DIV.progress {
	OVERFLOW: hidden;
	WIDTH: 0px;
	POSITION: absolute;
	HEIGHT: 20px;
	BACKGROUND-COLOR: blue;
}

#progressbar DIV.progress .text {
	COLOR: white;
	POSITION: absolute;
	TEXT-ALIGN: center;
	FONT-SIZE: larger;
}

#progressbar DIV.text {
	WIDTH: 100%;
	POSITION: absolute;
	HEIGHT: 100%;
	TEXT-ALIGN: center;
	FONT-SIZE: larger;
}

 

使用方法

$("#progressbar").reportprogress(hasReplay, function(width) {
					// Util.debug("width = "+width);
					object.setCurrent(Math.round(width * total / 100));
				}, total);