Ubuntu Life

Veo en Ajaxian el codigo de este Datagrid para JQuery. Permite ordenar por las columnas y paginar el numero de resultados. Ya tenemos una opcion mas para dejar bonitas y elegantes nuestras tablas de resultados.

Demo | jTPS

Ultimamente estoy con JQuery, es una libreria Javascript que te permite hacer aplicaciones muy potentes de manera muy simple. Navegando en digitalbush he encontrado una barra de progreso y me la guardo para si puedo integrarla luego en un componente FileUpload que estoy implementando. El codigo es muy simple, si quereis probar el ejemplo, basta que creeis una pagina HTML con este contenido:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

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

				if(innerdiv.length!=1){
					innerdiv=$("
<div class='progress'></div>
");
					div.append("
<div class='text'>&nbsp;</div>
");
					$("<span class='text'>&nbsp;</span>").css("width",div.width()).appendTo(innerdiv);
					div.append(innerdiv);
				}
				var width=Math.round(val/max*100);
				innerdiv.css("width",width+"%");
				div.find(".text").html(width+" %");
			}
		);
	};
})(jQuery);

	var pct=0;
	var handle=0;
	function update(){
			jQuery("#progressbar").reportprogress(++pct);
			if(pct==100){
				clearInterval(handle);
				$("#run").val("start");
				pct=0;
			}
	}
	jQuery(function($){
		$("#run").click(
			function(){
				if(this.value=="start"){
					handle=setInterval("update()",100);
					this.value="stop";
				}else{
					clearInterval(handle);
					this.value="start";
				}
			}
		);
		$("#reset").click(function(){
			pct=0;
			$("#progressbar").reportprogress(0);
		});
	});

</script>

<style>
	/* progress bar container */
	#progressbar{
		border:1px solid black;
		width:200px;
		height:20px;
		position:relative;
		color:black;
	}
	/* color bar */
	#progressbar div.progress{
		position:absolute;
		width:0;
		height:100%;
		overflow:hidden;
		background-color:#369;
	}
	/* text on bar */
	#progressbar div.progress .text{
		position:absolute;
		text-align:center;
		color:white;
	}
	/* text off bar */
	#progressbar div.text{
		position:absolute;
		width:100%;
		height:100%;
		text-align:center;
	}
</style>
<div id="progressbar"></div>
<input type='button' id='run' value='start'/>
<input type='button' id='reset' value='reset'/>