begin process at 2012 05 28 14:26:36
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > PLUGIN JQUERY : PROGRESS BAR

PLUGIN JQUERY : PROGRESS BAR


 Information sur la source

Note :
Aucune note
Catégorie :Graphique Classé sous :progress, bar, barre, progression, jquery Niveau :Initié Date de création :17/06/2010 Vu / téléchargé :7 941 / 528
Auteur : ryosama

Ecrire un message privé
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Voici un petit script qui permet de créer des barres de progression, via jQuery, très simplement pour les rajouter à vos pages web.
Le code d'intégration tient en une ligne mais il est personnalisable.

La barre peut être aligné verticalement ou horizontalement, on peut modifier les couleurs et la taille.

Une demo est visible ici : http://www.coopmcs.com/demo/progressbar/progressba r.html

La source présentée contient 6 progress bar de différentes couleurs et orientation.

Source

  • <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> 
<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>

 Conclusion

C'est mon premier plugin jQuery, j'ai fais ce test pour voir un peu comment ce comportait le bazard.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT
Source avec Zip Source avec une capture LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER
Source avec Zip Source avec une capture AUTO COMPLETION SUR CHAMPS TEXTE
Source avec Zip FONDU ENCHAINER ENTRE PLUSIEURS IMAGES
Source avec Zip Source avec une capture SELECTION DE VALEURS A PARTIR DE 2 LISTES À CHOIX MUPLIPLES
Toutes les sources de ryosama

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MYNOTIFICATIONS par inwebo
Source avec Zip Source avec une capture WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf
Source avec Zip Source avec une capture BARRE DE POSITION OU DE NOTE par benwa74
Source avec Zip BARRE DE CHARGEMENT par stfou
Source avec Zip BARRE DE PROGRESSION MODULABLE par vbbreizh

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Barre de progression lors de l'upload de fichier [ par stefane321 ] Bonjour,J'ai installé ce script qui fait afficher une barre de progression lors de l'upload de fichierhttp://www.javascriptfr.com//code.aspx?ID=45586I 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: scroll bar pour animation flash [ par zigzag999 ] &nbsp;Je cherche comment faire une barre de d&#233;filement qui&nbsp;permettrait de suivre une animation flash. La barre serait en synchro avec l'anim ajout d'un hide dans une ligne de code.... [ par phhav ] Voila mon probleme...------------------------------------------------------------------------if(imbedded_progress_bar){ document.form_upload.imbedded_ 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 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 [ 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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,387 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)