Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PROGRESS BAR WIDGET


Information sur la source

Catégorie :Graphique Classé sous : widget, progressbar, progression Niveau : Débutant Date de création : 01/02/2008 Date de mise à jour : 27/07/2008 17:17:43 Vu : 10 581

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
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

  • // 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 } );
// 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
 

Historique

01 février 2008 09:27:27 :
Impossible d'ajouter le zip ( page d'erreur de CS ). La source est disponible ici: http://pierrick.hymbert.googlepages.com/ProgressBar.zip
01 février 2008 11:27:39 :
Réduction du code pour dessiner la barre de progression. Ajout d'une méthode dispose pour enlever la progress bar proprement. La source est toujours disponible sur : http://pierrick.hymbert.googlepages.com/ProgressBar.zip
01 février 2008 11:32:29 :
Bug de lecture par le serveur CS de l'archive générée par eclipse lors de l'export. Mise à jour de l'archive.
01 février 2008 14:44:06 :
Possiblité de faire évoluer la couleur des indicateurs en fonction de la selection courante.
04 juin 2008 14:37:29 :
Ajout d'un style TRANSPARENCY qui permet d'ajouter un effet de transparence associé au style INDETERMINATE: // 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 } );
04 juin 2008 14:41:21 :
Ajout du style TRANSPARENCY qui permet d'ajouter un effet de transparence!
11 juin 2008 17:01:19 :
Suite à la demande de karasnake, je poste un petit exemple pour l'upload de fichier. Have fun! Pierrick
27 juillet 2008 17:16:55 :
Ajout de la librairie sur http://scripteka.com<br/>, les versions sont disponible ici:<br/> http://pierrick.hymbert.googlepages.com/progressBarExamples.html
27 juillet 2008 17:17:43 :
Ajout de la librairie sur scripteka.com. Suppresion du zip sur CS.

Commentaires et avis

signaler à un administrateur
Commentaire de XtremDuke le 01/02/2008 10:10:52

C'est clean et bien implémenté. Y'a presque rien à dire.

Cependant, j'ai deux remarques :
- Tu as voulu te passer d'images pour créer tes controles. C'est bien et tu y es arrivé. Mais est-ce vraiment judicieux ? 9 calques pour créer un cluster... je ne suis pas fan de cette approche même si, il est vrai, celà permet de moduler la taille du controle à sa convenance.

- Tu repetes x fois pratiquement la même chose pour créer tes clusters et tes bordures. Pourrais-tu pas réduire celà à une seule et même fonction ?

Et en passant, vive prototype !   ^^'

signaler à un administrateur
Commentaire de the_wwt le 01/02/2008 10:14:32

Bonjour,
tout à fait d'accord, il faut gérer ça différement je m'y met.
Aussi je me suis aperçu qu'il n'y avait pas de méthode pour enlever la progress bar.
Je met la source à jour d'ici peu.
Merci pour la critique,
Pierrick

signaler à un administrateur
Commentaire de Nix le 01/02/2008 11:20:04 administrateur CS

Pour info : J'ai dézippé et rezippé ton zip et c'est passé. (Cela ne passait pas avec le zip d'origine)
Avec quoi avais-tu compressé ce zip ? (Qu'on regarde pourquoi cela ne fonctionnait pas)

signaler à un administrateur
Commentaire de the_wwt le 01/02/2008 11:29:10

Bonjour Nix,
avec la fonction export d'eclipse, je n'utiliserai donc plus cette fonction.
Merci de ton intervention.
Pierrick

signaler à un administrateur
Commentaire de Nix le 01/02/2008 12:17:57 administrateur CS

Ok merci pour l'info, on va regarder ce qui n'est pas conforme dans ces zip

signaler à un administrateur
Commentaire de xeolin le 10/02/2008 21:35:23 10/10

bravo, tres bonne source !

signaler à un administrateur
Commentaire de stefane321 le 03/06/2008 22:01:35

De mon coté ce script ne fonctionne pas avec Internet Explorer mais fonctionne avec Firefox.

Pourquoi sa marche pas avec Internet Explorer?

Merci!

signaler à un administrateur
Commentaire de the_wwt le 04/06/2008 09:36:25

Bonjour,
quelle version d'IE? Je viens de retester sous IE8 et IE7, ça roule!
La 6 est réellement dépassé maintenant, même chez les société, non ?!
Cordialement,
Pierrick

signaler à un administrateur
Commentaire de stefane321 le 04/06/2008 13:23:20

J'ai internet explorer 7, donc je dois avoir fait une erreur en tranférant le code dans ma page mais cest étrange que firefox l'exécute

signaler à un administrateur
Commentaire de the_wwt le 04/06/2008 13:42:55

Je peux juste t'inviter à donner ton bout de code pour qu'on le valide ensemble...
Cdlt,
Pierrick

signaler à un administrateur
Commentaire de stefane321 le 04/06/2008 14:10:03

Dans mon fichier header.php j'ai mis:

<!--PROGESS BAR -->

<!--
/**
* @comment: Les css qui determine la taille des progress bar
* @import: progressBar
*/
-->
<link rel="stylesheet"
    href="../css/progressBar.css"
    type="text/css"/>
    
<!-- JavaScript -->

<!--
/**
* @comment: The prototype frameworks 1.6
* @import: prototype
*/
-->
<script
    src="../lib/prototype.js"
    type="text/javascript">
</script>

<!--
/**
* @comment: the ProgressBar class
* @import: ProgressBar
*/
-->
<script
    src="../lib/ProgressBar.js"
    type="text/javascript">
</script>

<!--
/**
* @comment: the progress bar tests
*/
-->
<script type="text/javascript">
//Instancie les barres de progression
progressBar1 = null;
progressBar2 = null;
progressBar3 = null;
function start(){
// Barre par défault en style indeterminé ( comme celle d'XP )
new ProgressBar( $("container"), {classProgressBar: 'progressBar1'} );


}

function updateProgressBar1( delta ){
progressBar1.setSelection( progressBar1.getSelection() + delta );
$("minimum").value= progressBar1.getMinimum();
$("selection").value= progressBar1.getSelection();
$("maximum").value= progressBar1.getMaximum();
}

function updateMinimum( ){
if( isNaN( $("minimum").value ) ){
$("minimum").value = progressBar1.getMinimum();
}else{
progressBar1.setMinimum( parseInt( $("minimum").value ) );
}
}

function updateSelection( ){
if( isNaN( $("selection").value ) ){
$("selection").value = progressBar1.getSelection();
}else{
progressBar1.setSelection( parseInt( $("selection").value ) );
}
}

function updateMaximum( ){
if( isNaN( $("maximum").value ) ){
$("maximum").value = progressBar1.getMaximum();
}else{
progressBar1.setMaximum( parseInt( $("maximum").value ) );
}
}

function startUpdateProgressBar2Selection(){
progressBar2.setSelection( ( progressBar2.getSelection() + 1 ) % progressBar2.getMaximum() );
setTimeout(startUpdateProgressBar2Selection, 200);
}

function startUpdateProgressBar3Selection(){
if( progressBar3.getSelection() == 0 )
progressBar3.setSelection( progressBar3.getMaximum() );
else
progressBar3.setSelection( progressBar3.getSelection() - 1  );
setTimeout(startUpdateProgressBar3Selection, 200);
}

function startUpdateProgressBar4Selection(){
progressBar4.setSelection( ( progressBar4.getSelection() + 1 ) % progressBar4.getMaximum() );
setTimeout(startUpdateProgressBar4Selection, 100);
}


function startUpdateProgressBar5Selection(){
if( progressBar5.getSelection() == 0 )
progressBar5.setSelection( progressBar5.getMaximum() );
else
progressBar5.setSelection( progressBar5.getSelection() - 1  );
setTimeout(startUpdateProgressBar5Selection, 200);
}

</script>
<!--PROGESS BAR -->

Dans mon formulaire j'ai mis:

<table width="600" border="0" cellspacing="4" cellpadding="4">
<tr>
<td align="center"><div id="container" align="center"></div></td>
</tr>
<tr>
<td align="center"><input type="submit" name="submit" value="Envoyer" class="submit" onclick="start()"></td>
</tr>
</table>

Dans le fichier css jai mis le positionnement à: relative

signaler à un administrateur
Commentaire de the_wwt le 04/06/2008 14:18:33

Bonjour,
en fait je pense que tu souhaites afficher une barre de progression pendant l'envoie du formulaire?!
Dans ce cas inutile de copier tout ce code, il te suffit de créer une barre de progression lors de l'événement onbeforeunload de l'objet window ou body!

<link rel="stylesheet" href="../css/progressBar.css" type="text/css"/>
<script src="../lib/prototype.js"  type="text/javascript"></script>
<script src="../lib/ProgressBar.js" type="text/javascript"></script>
<script type="text/javascript">
window.onbeforeunload = function(){
  while( document.body.children.length > 0 ){
     document.body.removeChild( document.body.children[0] );
  }
  new ProgressBar( $(document.body), {classProgressBar: 'progressBar1'} );
}
</script>

Cdlt,
Après pour le positionnement relatif, je ne pense pas que ça pose problème dans la mesure ou la classe s'applique à la div principal de la progress bar!

signaler à un administrateur
Commentaire de stefane321 le 06/06/2008 22:24:24

Je ne suis pas certains de comprendre complètement.

Je fais exécuter le code comment?

Par un appel dans le tag body ou dans le submit de mon formulaire?

signaler à un administrateur
Commentaire de the_wwt le 07/06/2008 12:06:19

Bonjour,
le code que je t'ai donné ( onbeforeunload ), lance la barre de progression lorsque l'utilisateur quitte la page: soit par validation du formulaire ( donc s'il y a un fichier par exemple dans le formulaire, il verra la barre s'afficher...), soit lorsqu'il clique sur un lien ( dans ce cas il ne verra pratiquement pas s'afficher la barre).
Le code s'execute lorsque tu instancie ( new ) la barre de progression.
Cordialement,
Pierrick

signaler à un administrateur
Commentaire de stefane321 le 10/06/2008 02:04:41

Maintenant, sa fonctionne sous Internet Explorer mais ne fonctionne plus avec FireFox

Deplus,le positionnement ne marche plus.

La barre s'affiche en haut a gauche

signaler à un administrateur
Commentaire de karasnake le 11/06/2008 16:37:36 10/10

Très bon code même si je n'ai pas encore réussi à le mettre dans mon code en tous cas c'est ce que je recherche !
Bravo !!!

signaler à un administrateur
Commentaire de the_wwt le 11/06/2008 17:02:40

Je crois que tu trouveras ton bonheur dans ce petit exemple,
bonne fin de stage, :-P
Pierrick

signaler à un administrateur
Commentaire de karasnake le 11/06/2008 18:03:56

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... ^^

signaler à un administrateur
Commentaire de the_wwt le 11/06/2008 18:23:16

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


signaler à un administrateur
Commentaire de karasnake le 16/06/2008 16:55:31

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

signaler à un administrateur
Commentaire de bladinium le 25/04/2009 15:45:33

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!

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Barre de progression dans une iframe [ par titoy ] Bonjour à tous, voici mon premier message sur le forum :)J'aurai besoin d'une lumière... alors je m'explique :J'ai une page html qui contient un menu. Prechargement avec bar pour la video [ par tekyo ] Salut à tous, Voila, j'ai des video sur mon site chargé de la manière suivante: Barre de progression [ par yzro ] Bonjour, je suis assez novice en ce qui concerne le language javascript (graphiste qui fait son book en ligne&#133;). Mais je suis parvenu &#224; mont progression du traitement d'1 servlet [ par kakol ] Bonjour,j'ai posté un message sur javafr (ici) mais on m'a conseillé de le poster plutot ici.J'ai une page jsp qui appelle une servlet lors de la va Tutoriel Widget dojo [ par guinus ] Bonjour,Quelqu'un aurait-il un lien vers un tutoriel expliquant la création de ses propres Widgets en Dojo ? Le tutoriel fourni par Alex Russel à http barre de progression [ par ebossss ] bonjour.J'essaye de faire une barre de progression mais ca marche pas vraiment.voici le code de la fonction qui affiche la barrefunction affiche_barre Barre de progression - Etat d'avancement lors d'un affichage d'image.. [ par Mastronic ] Bonjour, Est'il possible avec le javascript, d'avoir un etat d'avancement visuelle d'un chargement de fichier ( image par ex) .Une barre de progressio Barre de progression pendant un traitement [ par dijacou ] Bonjour, J'ai une page html qui traite, après appui sur un bouton, un fichier excel via un javascript et met à jour une base access.Je veux afficher u Uplaod + barre de progression [ par punkybreizh ] Bonjour,Actuellement je travaille sur un système d'upload de fichier via un formulaire. Pour cela j'utilise le php et javascript (AJAX) mais je rencon widget netvibes [ par nien ] bonjour je suis a la recherche d'un bon tuto concernant la librairie UWA de netvibes pour developper des gadgets universels avec des exemple et tout e


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,593 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.