Il n’est pas difficile de créer une fonction de notation par étoiles, mais il est un peu difficile de l’écrire simplement en utilisant CSS. Prenons d’abord une capture d’écran :
L’effet est très simple. Peut-être avez-vous déjà l’idée de le mettre en œuvre dans votre tête. Jetons un coup d'œil à notre méthode d'implémentation habituelle :
CSS :
code
.jsstar
{ style de liste : aucun ;
marge : 0px ;
remplissage : 0px ;
largeur : 100 px ;
hauteur : 20px ;
position : relative ;
}
.jsstarli
{
remplissage : 0 px ;
marge : 0px ;
flotteur : gauche ;
largeur : 20 px ;
hauteur : 20 px ;
background:url(star_rating.gif) 0 0 pas de répétition ;
}
HTML :
<p>Implémentation Javascript + CSS</p>
<ul class="jsstar">
<li title="Une étoile"></li>
<li title="Deux étoiles"></li>
<li title="Samsung"></li>
<li title="Quatre étoiles"></li>
<li title="cinq étoiles"></li>
</ul>
JS : (j'utilise jquery)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>
Voici le rendu :
N'est-ce pas différent de ce qui précède, mais je pense que si l'utilisateur désactive Javascript, l'effet ne serait-il pas très désastreux ?
Nous avons donc pensé à utiliser du CSS pur pour l'implémenter. Voici le code :
CSS :
code
1 /*Démarrage de l'étoile CSS*/
2.étoiles
3 {
4 style de liste : aucun ;
5 marge : 0px ;
6 remplissage : 0px ;
7 largeur : 100 px ;
8 hauteur : 20 px ;
9 position : relative ;
10 arrière-plan : url(star_rating.gif) en haut à gauche répéter-x ;
11 }
12.star-ratingli
13 {
14 remplissage : 0px ;
15 marge : 0px ;
16 flotteurs : gauche ;
17}
18 .star-rating li a
19 {
20 affichage : bloc ;
21 largeur : 20 px ;
22 hauteur : 20 px ;
23 décoration de texte : aucune ;
24 retrait de texte : -9000px ;
25 indice z : 20 ;
26 position : absolue ;
27 remplissage : 0px ;
28 }
29 .star-rating li a: survol
30 {
31 arrière-plan : url(star_rating.gif) en bas à gauche ;
32 indice z : 1 ;
33 à gauche : 0px ;
34}
35.étoiles a.une étoile
36 {
37 à gauche : 0px ;
38 }
39.star-rating a.one-star: survol
40 {
41 largeur : 20 px ;
42 }
43.étoiles a.deux étoiles
44 {
45 à gauche : 20px ;
46 }
47.star-rating a.two-stars: survoler
48 {
49 largeur : 40 px ;
50 }
51.star-rating a.trois étoiles : survoler
52 {
53 largeur : 60 px ;
54 }
55.étoiles a.trois étoiles
56 {
57 à gauche : 40px ;
58 }
59.étoiles a.quatre étoiles
60 {
61 à gauche : 60px ;
62 }
63.star-rating a.quatre étoiles : survoler
64 {
65 largeur : 80 px ;
66 }
67.étoiles a.cinq étoiles
68 {
69 à gauche : 80px ;
70}
71.star-rating a.cinq étoiles : survoler
72 {
73 largeur : 100 px ;
74
75 }
HTML :
<ul class='star-rating'>
<li><a href='#' title='One Star' class='one-star'>1</a></li>
<li><a href='#' title='two stars' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='trois étoiles'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
En regardant les numéros de lignes CSS ci-dessus, êtes-vous choqué qu'un effet aussi simple nécessite autant de code ? À mon avis, vous ne pouvez avoir qu'un seul effet et un seul style sans utiliser JS. Si vous avez un effet plus simple et plus éblouissant, faites-le moi savoir !