하나의 진행률 표시줄

프로젝트에 클릭 이벤트를 처리할 수 있는 진도표가 필요합니다
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);