PROGRESS BAR WIDGET

Signaler
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
-
Messages postés
3
Date d'inscription
mercredi 5 février 2003
Statut
Membre
Dernière intervention
25 avril 2009
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/45586-progress-bar-widget

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... ^^
Afficher les 21 commentaires