Barra de progreso para JQuery

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'/>

3 Responses to “Barra de progreso para JQuery”


  1. 1 Neyudo septiembre 4, 2008 en 1:00 pm

    Jejej si muy simple : ( parati

  2. 2 superpiwi septiembre 4, 2008 en 1:12 pm

    Bueno, si has programado ya antes y mucho en javascript, veras que usar JQuery es mas simple aun.

  3. 3 rasec septiembre 4, 2008 en 2:13 pm

    Hola, yo también ando probando cosas con este framework, y me ha ahorrado más de un quebradero de cabeza.

    Efectos no tiene demasiados pero una de las cosas más útiles es el tema de la manipulación de los elementos, que resulta muy fácil y cómodo.

    La he utilizado en mi último proyecto: un sistema de búsqueda, streaming y recomendación de música que obtiene los datos de Jamendo (bajo licencias libres) y del que jQuery me ha ayudado para el tratamiento de los datos obtenidos así como para facilitar las llamadas asíncronas y por supuesto los efectos. Todavía está en fase de pruebas pero quiero seguir con ello algún tiempo.

    Un saludo.


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s





The next version of Ubuntu is coming soon


¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
septiembre 2008
L M X J V S D
« ago   oct »
1234567
891011121314
15161718192021
22232425262728
2930  

Blog Stats

  • 26,798,113 hits

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.042 seguidores

%d personas les gusta esto: