creation de rules css avec jquery en runtime

SpaceFrog · 26/07/2011, 11h07

Je m'amusais a développer une petit plugin de colorisation de lignes de tableau, et je voulais éviter d'avoir a relancer la coloration des lignes sur le callback du hover, d'ou l'idée d'utiliser un addClass et removeClass...

J'ai donc tenté ceci:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F'};
        var opts= $.extend(defaut,params)
 
        $('<style type="text/css"> .hover{ background-color:'+opts.hoverColor+';}</style>').appendTo($("head")[0]);
 
        $(this).find('tr:even').css({'background-color':opts.evenColor});
        $(this).find('tr:odd').css({'background-color':opts.oddColor});
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows() 
 
})
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		</td>&nbsp;h</td>
	</tr>
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
	<tr>
		</td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

Mais il semblerait que ma creation de rule css reste vaine ?

galerien69 · 26/07/2011, 11h24

salut,

je pense que quand tu fais

Code :

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

        $(this).find('tr:odd').css({'background-color':opts.oddColor});

par exemple, les css sont rajoutés dans le dom.
Et on sait bien sûr que un truc dans le dom c'est prioritaire devant les définitions dans un style sheet (au niveau des sélecteurs)

Donc tu peux retirer ces deux lignes où leur affecter du css comme dans le style avec des selecteurs css.
Un exemple très simple qui illustre :

Code :

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

$('<style type="text/css"> .hover{ color:green; background-color:'+opts.hoverColor+';}</style>').appendTo($("head")[0]);

On voit que la couleur green est bien appliquée.

ps : les td ouvrants c'est mieux avec

SpaceFrog · 26/07/2011, 11h29

arf pour les </td> à l'ouvertuer un soucie de copier coller :red:

bon alors la solution c'est juste de rajouter important ^^

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F'};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css"> .hover{ background-color:'+opts.hoverColor+' !important;}</style>').appendTo($("head")[0]);			
      	 $(this).find('tr:even').css({'background-color':opts.evenColor});
        $(this).find('tr:odd').css({'background-color':opts.oddColor});
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows() 
 })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>&nbsp;h</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

De façon a forcer la priorité du css pour le hover

SpaceFrog · 26/07/2011, 12h03

en y ajoutant le selected :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey:
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={"evenColor":'#FFFCD2',"oddColor": '#FFF778', "hoverColor":'#FFA64F', selectedColor:"red"};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css">.odd{ background-color:'+opts.oddColor+' !important;}.even{ background-color:'+opts.evenColor+' !important;}.hover{ background-color:'+opts.hoverColor+' !important;}.selected{ background-color:'+opts.selectedColor+' !important;}</style>');	
  		 $('head').append(newstyle)
 
        $(this).find('tr:even').addClass('even');
        $(this).find('tr:odd').addClass('odd');
        $(this).find('tr').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');}).click(function(){$(this).toggleClass('selected')})
 
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows({hoverColor:"orange",selectedColor:'lime'}) })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>&nbsp;h</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
	<tr>
		<td>&nbsp;</td>
	</tr>
 
</table>
</body>
 
</html>

SpaceFrog · 26/07/2011, 13h42

pour aller un peu plus loin:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
table {width:100%;
	border-collapse:collapse;}
td {border: solid 1px grey;
}
</style>
<script type="text/javascript">
(function($) {
        $.fn.ColorTableRows = function(params) {
        var defaut={	firstLine:"#FFA200", //couleur de la première ligne 
        				firstCol:"#FFC055",  //couleur de la première colonne
        				firstWidth: 100,
        				"evenColor":'#FEFF00', //couleur des lignes paires
        				"oddColor": '#C9CA35', //couleur des lignes impaires 
        				"hoverColor":'#FFD4FE', //couleur au survol
        				selectedColor:"#D500D0" // couleur de selection
         				};
        var opts= $.extend(defaut,params)
 
  		 var newstyle = $('<style type="text/css">.odd{ background-color:'+opts.oddColor+' !important;}.even{ background-color:'+opts.evenColor+' !important;}.hover{ background-color:'+opts.hoverColor+' !important;}.selected{ background-color:'+opts.selectedColor+' !important;}.firstLine{ background-color:'+opts.firstLine+' !important;}.firstCol{ background-color:'+opts.firstCol+' ;}</style>');	
  		 $('head').append(newstyle)
 
        $(this).find('tr:eq(0)').addClass('firstLine');
        $(this).find('tr:gt(0)').find('td:first').addClass('firstCol')
		$(this).find('tr:gt(0)').find('td:first').css({width:opts.firstWidth +"px"})
        $(this).find('tr:gt(0):even').find('td:gt(0)').addClass('even');
        $(this).find('tr:gt(0):odd').find('td:gt(0)').addClass('odd');
        $(this).find('tr:gt(0) td').hover(function(){$(this).parent('tr').find('td').addClass('hover');},function(){$(this).parent('tr').find('td').removeClass('hover');}).click(function(){$(this).parent('tr').find('td').toggleClass('selected')})
 
 
        };
})(jQuery);
 
 
$(function(){
 $("#foo").ColorTableRows()
 })
</script>
 
</head>
 
<body>
<table id="foo">
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
		<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
	<tr>
		<td>contenu</td>
		<td>contenu</td>
		<td>contenu</td>
	</tr>
 
</table>
</body>
 
</html>

26/07/2011, 11h24	#2
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	salut, je pense que quand tu fais Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).find('tr:odd').css({'background-color':opts.oddColor}); par exemple, les css sont rajoutés dans le dom. Et on sait bien sûr que un truc dans le dom c'est prioritaire devant les définitions dans un style sheet (au niveau des sélecteurs) Donc tu peux retirer ces deux lignes où leur affecter du css comme dans le style avec des selecteurs css. Un exemple très simple qui illustre : Code : Sélectionner tout - Visualiser dans une fenêtre à part $('<style type="text/css"> .hover{ color:green; background-color:'+opts.hoverColor+';}</style>').appendTo($("head")[0]); On voit que la couleur green est bien appliquée. ps : les td ouvrants c'est mieux avec
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email