CSS pour multiple progressbar

Invité · 29/05/2013, 15h05

Bonjour,

Sur ma page j'ai plusieurs progressbar. Je les génères dynamiquement avec des nom de classe differents:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="progbar1 pbar"...>
<div class="progbar2 pbar"...>
<div class="progbar3 pbar"...>
...

J'essai de faire comme dans cet exemple http://jqueryui.com/progressbar/#indeterminate

Du coup j'ai crée des propriétés CSS pour :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.pbar .ui-progressbar-value {
   background: red;
}

Les progressbars sont correctement initialisées et j'arrive bien a recupérer les valeurs.
voici le bout de script cense m'aider a modifier le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
//je boucle sur toutes mes bars
 
//je stock la pregressbar courante
var bar = $(".progbar"+id);
//j'isole la propriété CSS (techniquement)
var barValue = bar.find(".ui-progressbar-value");
//puis je la modifie
if (parseInt(bar.progressbar("value") < 30))
   barValue.css({ "background": "black" });

Or la couleur ne change pour aucune bar.
Merci

**Lorenzo77** · 29/05/2013, 20h15

salut,

ca serait pas plutot (css) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-color: red;

?

et en JS l'exemple passe une couleur sous la forme héxa (#FF0000), alors que toi tu esssayes de passer le nom d'une couleur .... faut verifier ...

**danielhagnoul** · 29/05/2013, 22h38

Il n'y aurait pas une confusion entre barValue et bar ?

Invité · 30/05/2013, 09h31

Envoyé par Lorenzo77

ca serait pas plutot (css) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-color: red;

?

et en JS l'exemple passe une couleur sous la forme héxa (#FF0000), alors que toi tu esssayes de passer le nom d'une couleur .... faut verifier ...

J'ai essayé. La propriété background-color n'a aucun effet, avec ou sans héxa.

Lorsque je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: red;

toutes les bares passent en rouge (bleu a l'origine).

J'ai l'impression de mal isoler le CSS dans mon JS. C'est certainement due au fait que les noms de classe soient du genre class="progbarXXX pbar" alors que le CSS s'applique sur .pbar .ui-progressbar-value . Je ne vois pas comment faire autrement.

Envoyé par danielhagnoul

Il n'y aurait pas une confusion entre barValue et bar ?

A ce stade la j'en ai aucune idée ....

Edit: lorsque je fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(barValue.css("background"))

Le resultat est "undefined".

**danielhagnoul** · 30/05/2013, 09h43

Avez-vous vraiment essayé : bar.css({ "background": "black" }); ?

Invité · 30/05/2013, 09h49

Oui, rien ne se produit.

**danielhagnoul** · 30/05/2013, 11h56

Bonjour

J'ai pris le temps de mieux lire la question et de tester, la complication vient du fait que vous voulez gérer plusieurs progressbar. Voici un exemple statique (l'inclusion dynamique des progressbar compliquera encore plus le code et je manque de temps) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
/*
 * Toutes les divisions ave un ID qui débute
 * par 'progressbar'.
 */
$( "div[id^='progressbar']" ).progressbar({
	"value" : false
});
 
/*
 * Tous les button avec un ID qui contient 'Button'
 */
$( "button[id*='Button']" ).on( "click", function( event ){
	var target = $( event.target ),
    	progressbar = target.prevAll( "div[id^='progressbar']" ).eq( 0 ),
    	progressbarValue = progressbar.find( ".ui-progressbar-value" );
 
    // debug
    //console.log( target, progressbar, progressbarValue );
 
    /*
     * progressbarValue : c'est une division générée dynamiquement
     * 
     * <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" 
     * aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
     *     <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 50%;"></div>
     * </div>
     */
 
    if ( target.is( "button[id*='num']" ) ){
    	progressbar.progressbar( "option", {
    		"value" : Math.floor( Math.random() * 100 )
    	});
 
    } else if ( target.is( "button[id*='color']" ) ){
    	progressbarValue.css({
    		"background" : '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
    	});
 
  	} else if ( target.is( "button[id*='false']" ) ){
    	progressbar.progressbar( "option", "value", false );
  	}
});
				});
 
				$( window ).load( function(){
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#progressbar .ui-progressbar-value { background-color: #ccc; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="progressbar1"></div>
<button id="numButton1">Random Value - Determinate</button>
<button id="falseButton1">Indeterminate</button>
<button id="colorButton1">Random Color</button>
 
<div id="progressbar2"></div>
<button id="numButton2">Random Value - Determinate</button>
<button id="falseButton2">Indeterminate</button>
<button id="colorButton2">Random Color</button>
 
<div id="progressbar3"></div>
<button id="numButton3">Random Value - Determinate</button>
<button id="falseButton3">Indeterminate</button>
<button id="colorButton3">Random Color</button>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-29T22:29:24.860+02:00" pubdate>2013-05-29T22:29:24.860+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

CSS pour multiple progressbar

jQuery

Vue hybride

Discussions similaires

Partager

Partager