Progress bar widget

Soyez le premier à donner votre avis sur cette source.

Snippet vu 19 098 fois - Téléchargée 1 396 fois

Contenu du snippet

Classe offrant une API pour la gestion d'une barre de progression à la manière de la SWT en pur javascript ( pas d'images ).
Trois styles sont proposés:
° Indeterminé: les indicateurs de progression se déplace indéfiniment.
° Le style determiné, l'utilisateur met à jour la séléction.
° Le style transparent, qui en association avec le premier ajoute une effet de tansparence.
Le script permet entre autres de changer la couleur et la taille de la barre de progression.
Have fun,
Pierrick

Source / Exemple :


// Barre par défaut en style indeterminé ( comme celle d'XP )
new ProgressBar( $("container"), {classProgressBar: 'progressBar1'} );

// Progress bar determinée avec selection gérée par setTimeout sens inverse et couleur changeante
new ProgressBar( $("container"), {classProgressBar: 'progressBar8', style: ProgressBar.DETERMINATE, color: {r: 0, g: 255, b: 0}, colorEnd: {r: 255, g: 0, b: 0} }  );

// Barre de progression avec effet de transparence
new ProgressBar( $("container"), {classProgressBar: 'progressBar9', style: ProgressBar.INDETERMINATE | ProgressBar.TRANSPARENCY, color: {r: 0, g: 0, b: 255}, noIndeterminateIndicators: 25 }  );

Conclusion :


versions sont disponible ici:
http://pierrick.hymbert.googlepages.com/progressBarExamples.html

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
mercredi 5 février 2003
Statut
Membre
Dernière intervention
25 avril 2009

Bonjour, merci pour ce script!

mais je suis complètement novice :p pourriez vous me dire le code a utilisé pour le lancer dans une page php ?

j'aimerais le premier des coloris, celui qui deviens vert a la fin. c'est une manuel que je souhaites pour signaler l'avancement d'une choses qui mettra plusieurs jours.

je vous remercie d'avance!
Messages postés
27
Date d'inscription
dimanche 12 novembre 2006
Statut
Membre
Dernière intervention
16 juin 2009

Merci pour ton explication!!! Je me doutais qu'il fallait faire quelque chose de ce genre mais n'ayant jamais fais d'ajax pour le moment je vais en rester à la pour le moment! en tous cas merci de ton aide! J'ai hate de voir ton petit tuto la dessus !! bon courage pour ton rapport de stage aussi!
David
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
Bonjour,
le style css définit seulement la taille et la position de la barre de progression.
Sinon tout ce passe par les options que tu fournit au constructeur.

Pour ton problème, je crois que c'est bien plus compliqué que tu ne l'imagines.
Si tu veux faire évoluer la barre de progression en fonction de l'avancement de l'upload, il faut que ton serveur web te dise où c'est qu'il en est de la reception.
Et tout ceci bien sur en ajax pour pour voir l'afficher chez le client.

Un exemple serait:
// Tu crée ta barre de progression en style determiné dans le onsubmit:
var progressBar = null;
$("myForm").onsubmit = function(){
progressBar = new ProgressBar( $("container"), {classProgressBar: 'progressBar', style: ProgressBar.DETERMINATE, selection: 0} );

// Tu appels ton serveur
appelServer();
}

// La fonction qui appel ton serveur:
function appelServer(){
new Ajax.Request(url, { onSuccess: updateProgressBar } );
}

// Ton serveur te renvoie une page contenant uniquement un chiffre entre 0 et 100 ( pour faire simple ), donc quand tu récupères ta réponse dans la fonction updateProgressBar:
function updateProgressBar( transport ){
progressBar.setSelection( parseInt( transport.responseText ) );
}

Le fait de pouvoir montrer à l'utilisateur où en est l'avancement est très intéressant, mais ça demande un effort certains d'implémentation.
Quand j'aurai le temps (moi aussi j'ai un rapport de stage à faire, :( ), j'écrirai un petit tuto pour montrer la démarche plus proprement.

En tout cas bon courage à toi!
Pierrick
Messages postés
27
Date d'inscription
dimanche 12 novembre 2006
Statut
Membre
Dernière intervention
16 juin 2009

tout d'abord merci pour ton exemple car il fonctionne a merveille!!
Par contre j'avais une petite question si je veux changer de baren mettre une autre une des barres progressive comment je dois faire la bar qui va se remplir en fonction de l'upload par exemple?
doit declarer un nouveau style de ce genre:
<style type="text/css">
.uploadProgressBar1{
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 18px;
}
.uploadProgressBar2{
position: relative;
left: 25%;
top: 0%;
width: 50%;
height: 18px;
}
</style>
et dans mon javascript aussi je pense que je devais faire appel a l'autre prgresse bar... ^^
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
Je crois que tu trouveras ton bonheur dans ce petit exemple,
bonne fin de stage, :-P
Pierrick
Afficher les 21 commentaires

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.