Test

Soyez le premier à donner votre avis sur cette source.

Snippet vu 1 872 fois - Téléchargée 4 fois

Contenu du snippet

<html>
<head>
<title> new document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="progressBar.jQuery.js"></script>
<style type="text/css">@import url(progressBar.jQuery.css);</style>
<script language="javascript">
<!--

var compteur = 60;

function update_progressBar(valeur) {
/* params are name:default
orientation:'vertical', // 'vertical' ou 'horizontal' -> orientation de la progress bar
value:0 // valeur par défaut de la progress bar
max:100 // valeur maximum possible
rows:30 // nombre de lignes pour l'affichage


/


$('#progress1').progressBar( { value:valeur , rows:60} );
$('#progress2').progressBar( { value:valeur/2 } );
$('#progress3').progressBar( { value:valeur/3 } );
$('#progress4').progressBar( { value:valeur , orientation:'horizontal'} );
$('#progress5').progressBar( { value:valeur/2 , orientation:'horizontal'} );
$('#progress6').progressBar( { value:valeur/3 , orientation:'horizontal'} );

if (compteur<=100) {
window.setTimeout ("update_progressBar(" + compteur++ + ")", 120 ); // toute les second
}
}

$(document).ready(function () {
window.setTimeout ("update_progressBar(compteur)", 60 ); // toute les second
});

//-->
</script>

<style>
/* red progress bar*/
#progress2 td.progressBar-off { background-color:#600; }
#progress2 td.progressBar-on { background-color:#f00; }
#progress2 td.progressBar-value { color:#f00; }

/* yellow progress bar */
#progress3 td.progressBar-off { background-color:#660; }
#progress3 td.progressBar-on { background-color:#ff0; }
#progress3 td.progressBar-value { color:#ff0; }

/* maroon progress bar */
#progress4 td.progressBar-off { background-color:maroon; }
#progress4 td.progressBar-on { background-color:peru; }
#progress4 td.progressBar-value { color:peru; }

/* blue progress bar */
#progress5 td.progressBar-off { background-color:MidnightBlue ; }
#progress5 td.progressBar-on { background-color:DeepSkyBlue ; }
#progress5 td.progressBar-value { color:DeepSkyBlue ; }

/* white progress bar */
#progress6 td.progressBar-off { background-color:DimGray ; }
#progress6 td.progressBar-on { background-color:white; }
#progress6 td.progressBar-value { color:white; }
</style>
</head>

<body style="background-color:black;color:red;">

<div id="progress1" style="position: relative; float: left;"></div>
<div id="progress2" style="position: relative; float: left;"></div>
<div id="progress3" style="position: relative; float: left;"></div>
<br style="clear:both;"/>
<br style="clear:both;"/>
<div id="progress4"></div>
<div id="progress5"></div>
<div id="progress6"></div>
</body>
</html>

A voir également

Ajouter un commentaire

Commentaires

Commenter la réponse de noctambule28

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.