X

Aleproste na FaceBook'u

Reklama.

[jQuery] Bardzo prosty pasek postępu

Są przypadki kiedy bardzo pomocne, lub wręcz nie ocenione jest pokazanie w jakim punkcie akcji aktualnie znajduje się nasz skrypt. Dobrym przykładem jest np. pasek postępu w oknach kopiowania plików, czy przesyłania danych.

Tutaj bardzo prosty przykład paska postępu, który pokazuje upływający czas do momentu odświeżenia strony.

Skrypt w akcji można zobaczyć na ws550.nazwa.pl w tle daty i godziny, w górnym lewym rogu strony.

Jak zwykle w takich przypadkach niezbędne będą 3 elementy:

  • box html
  • skrypt jQuery
  • format CSS

Box html, czyli zwyczajny div z ustalonym id.

<div id='timer'></div>

Skrypt jQuery, oczywiście gdzieś tam na początku ładujemy aktualną bibliotekę jQuery.

<script type="text/javascript">
 $(function(){

	  var dl = 0;
		setInterval(function(){
	  		dl = dl + 1;
			$j("#timer").css({"width": + dl + "px"});
	  }, 1000);

});
</script>

No i na koniec trochę formatu CSS, aby pasek jakoś wyglądał.

#timer {
 z-index:0; 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: 0; /* to jest ważne */
 height: 40px; 
 background: #090; /* kolor paska inny niż tła :) */
}

Oczywiście wszystko to to jedynie idea, którą każdy może ubrać we własne szaty. Mój pasek można zobaczyć na ws550.nazwa.pl zapraszam!

opublikowane 01-07-2012146097 powrót

© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl