PROGRESS BAR WIDGET
XtremDuke
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
-
1 févr. 2008 à 10:10
cs_bladinium Messages postés 3 Date d'inscription mercredi 5 février 2003 Statut Membre Dernière intervention 25 avril 2009 - 25 avril 2009 à 15:45
cs_bladinium Messages postés 3 Date d'inscription mercredi 5 février 2003 Statut Membre Dernière intervention 25 avril 2009 - 25 avril 2009 à 15:45
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
https://codes-sources.commentcamarche.net/source/45586-progress-bar-widget
25 avril 2009 à 15:45
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!
16 juin 2008 à 16:55
David
11 juin 2008 à 18:23
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
11 juin 2008 à 18:03
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... ^^
11 juin 2008 à 17:02
bonne fin de stage, :-P
Pierrick
11 juin 2008 à 16:37
Bravo !!!
10 juin 2008 à 02:04
Deplus,le positionnement ne marche plus.
La barre s'affiche en haut a gauche
7 juin 2008 à 12:06
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
6 juin 2008 à 22:24
Je fais exécuter le code comment?
Par un appel dans le tag body ou dans le submit de mon formulaire?
4 juin 2008 à 14:18
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!
4 juin 2008 à 14:10
<!--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:
Dans le fichier css jai mis le positionnement à: relative
4 juin 2008 à 13:42
Cdlt,
Pierrick
4 juin 2008 à 13:23
4 juin 2008 à 09:36
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
3 juin 2008 à 22:01
Pourquoi sa marche pas avec Internet Explorer?
Merci!
10 févr. 2008 à 21:35
1 févr. 2008 à 12:17
1 févr. 2008 à 11:29
avec la fonction export d'eclipse, je n'utiliserai donc plus cette fonction.
Merci de ton intervention.
Pierrick
1 févr. 2008 à 11:20
Avec quoi avais-tu compressé ce zip ? (Qu'on regarde pourquoi cela ne fonctionnait pas)
1 févr. 2008 à 10:14
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
1 févr. 2008 à 10:10
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 ! ^^'