有没有办法将jquery UI进度条划分为不同的部分以及支持> 100％？

> multimize获取进度条ID和喜欢的颜色数组,此功能将原始进度条分解为具有多个颜色数组长度的多个条形的新版本.
> multiupdate为更新进度条调用此方法,此函数提供progressbarId和一个条形数值值.

我所做的一点点：
只需将原始栏克隆到许多其他栏并使用表格显示每个栏上的统计数据.代码的长度是因为包含的样式,但您可以将其压缩到至少30％.

编辑：

添加了对numbers的支持> 100

// this method overrides jqueryUi progress bar
 // the length of <colors> will be number of breakes
 // this method also add a table that presents percentage in position 
function multimize(progressBarId,colors,maX) {
	var pbar = $("#"+progressBarId);
	pbar.progressbar({ value: 100 });
	pbar.data('max',maX);
	pbar.css("position","relative");
	$("#"+progressBarId+" div").css({"position": "absolute","BACkground": colors[colors.length-1],"border":"none"}).attr("id",progressBarId+"_sub"+(colors.length-1));
	var textTable = $('<table></table>').css({"border":"none","position":"absolute","color":"white","width":"100%","height":"100%"}).attr("id",progressBarId+"_tbl");
	var textRow = textTable.append($('<tr></tr>')).css({"text-align":"center"});
	textRow.append($('<td>d</td>'));
	for (var i=colors.length-2; i>=0; i--) {
		$("#"+progressBarId+" div").clone().appendTo("#"+progressBarId)
			.css({"position": "absolute","BACkground": colors[i],"border-radius": "0","width": "1%"})
			.attr("id",progressBarId+"_sub"+i);
			textRow.append($('<td>d</td>')).css({"text-align":"center"});
	}
	pbar.append(textTablE);
}
 // this method will be update multimized progressbars
 // this method automatically finalize progressbar
function multiupdate(progressBarId,values) {
	var pbar = $("#"+progressBarId);
	var i,@R_798_10586@l = 0;
	var percentes = [];
	for (i=0; i<values.length; i++) @R_798_10586@l += values[i];
	$("#"+progressBarId+"_tbl").css("width",(@R_798_10586@l*(100/pbar.data('max')))+"%")
	for (i=0; i<values.length; i++) {
		var perc = values[i]/@R_798_10586@l*100*(@R_798_10586@l/100)*(100/pbar.data('max'));
		percentes.push((i==0)?perc:perc+percentes[i-1]);
		$("#"+progressBarId+"_sub"+i).css({"width": percentes[i]+"%"});
		$("#"+progressBarId+"_tbl td:eq("+i+")").text(Math.floor(values[i])).css("width",(values[i]/@R_798_10586@l)+"%");
	}
	if (@R_798_10586@l >= pbar.data('max')) {
		finilize(progressBarId);
	}
}

function finilize(progressBarId) {
	// removing demo timer
	clearInterval(timer);
	
	var pbar = $("#"+progressBarId);
	pbar.empty();
	pbar.text("compete "+pbar.data('max')+"%").css({"color":"black","BACkground":"lightgreen","text-align":"center"});
}
 
 
// Demo
// here is a demo of progress bar update and finilize
 $(function() {
	multimize("progressbar",["#06AF8F","#000000","#F94443"],200);
 });
var classA=0,classB=0,classC=0;
var timer = seTinterval(function(){
	classA += (Math.round(R_336_11845@ath.random() * (20 - 2) + 2))/30;
	classB += (Math.round(R_336_11845@ath.random() * (20 - 1) + 1))/15;
	if (classC<20) classB = Math.min(classB,15);
	classC += (Math.round(R_336_11845@ath.random() * (20 - 7) + 7))/60;
	classC = Math.min(classC,40);
	multiupdate("progressbar",[classA,classB,classC]);
},100);

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="page">
	<div id = "progressbar"></div> 
</div>