Système de notation par étoiles survolées avec jquery
Soyez le premier à donner votre avis sur cette source.
Vue 15 089 fois - Téléchargée 2 017 fois
Description
Plusieurs scripts équivalents sont disponibles mais je les trouvais un peu lourds en terme de code et l'utilisation de jquery simplifie grandement les choses selon moi.
Fonctionnement :
- Quand l'utilisateur survole une étoile, elle-même et les étoiles de notation inférieures changent d'apparence. Parallélement la notation est transmise au formulaire (sans avoir besoin de cliquer, pour les fénéants comme moi !).
- Quand l'utilisateur survole la croix, les étoiles reprennent l'apparence "non-survolée". Parallélement la notation est mise à 0 dans le formulaire (toujours sans clic fatiguant).
Cette dernière "astuce" m'a permis d'éviter de traiter le survol "out". Et simplifie grandement l'integration.
Integration :
- Installez la bibliothèque jquery dans votre dossier js/ (télécharger à cette adresse http://code.jquery.com/jquery-1.4.2.min.js )
- Copiez le contenu html dans votre page html, php, asp ou autre
- Copiez le contenu javascript dans votre page .js
- Copiez les images dans un dossier design/
A vous de gérer les données envoyées par le formulaire à votre guise.
Fonctionnement :
- Quand l'utilisateur survole une étoile, elle-même et les étoiles de notation inférieures changent d'apparence. Parallélement la notation est transmise au formulaire (sans avoir besoin de cliquer, pour les fénéants comme moi !).
- Quand l'utilisateur survole la croix, les étoiles reprennent l'apparence "non-survolée". Parallélement la notation est mise à 0 dans le formulaire (toujours sans clic fatiguant).
Cette dernière "astuce" m'a permis d'éviter de traiter le survol "out". Et simplifie grandement l'integration.
Integration :
- Installez la bibliothèque jquery dans votre dossier js/ (télécharger à cette adresse http://code.jquery.com/jquery-1.4.2.min.js )
- Copiez le contenu html dans votre page html, php, asp ou autre
- Copiez le contenu javascript dans votre page .js
- Copiez les images dans un dossier design/
Source / Exemple :
/////////////////////
/* HTML index.html */
/////////////////////
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fonctions.js"></script>
</head>
<body style="background:#333;color:#FFF;">
<form action="#" method="post">
Votre note<br/>
<input type="hidden" name="note" value="" id="note"/>
<img src="design/star_clear.gif" id="clear_stars" title="Sans intérêt c'est trop nul">
<img src="design/star_out.gif" id="star_1" class="star"/>
<img src="design/star_out.gif" id="star_2" class="star"/>
<img src="design/star_out.gif" id="star_3" class="star"/>
<img src="design/star_out.gif" id="star_4" class="star"/>
<img src="design/star_out.gif" id="star_5" class="star"/>
<!-- Ajouter autant d'étoile que nécessaire !-->
<input type="submit" value="Noter" class="bouton"/>
</form>
</body>
</html>
/////////////////////////////
/* Javascript fonctions.js */
/////////////////////////////
$(document).ready(function(){
///////////
// Notation
///////////
var srcIn='design/star_in.gif'; //image au survol
var srcOut='design/star_out.gif'; // image non survolée
// Obtenir id numérique des étoiles au format star_numero
function idNum(id)
{
var id=id.split('_');
var id=id[1];
return id;
}
// Survol des étoiles
$('.star').hover(function(){
var id=idNum($(this).attr('id')); // id numérique de l'étoile survolée
var nbStars=$('.star').length; // Nombre d'étoiles de la classe .star
var i; // Variable d'incrémentation
for (i=1;i<=nbStars;i++)
{
if(i<=id) $('#star_'+i).attr({src:srcIn});
else if(i>id) $('#star_'+i).attr({src:srcOut});
if(i==id)$('#note').attr({value:i}); // affectation de la note au formulaire
}
},function(){});
// Survol de la croix
$('#clear_stars').hover(function(){
$('.star').attr({src:srcOut});
$('#note').attr({value:'0'});
},function(){});
});
Conclusion :
A vous de gérer les données envoyées par le formulaire à votre guise.
Codes Sources
A voir également
- Notation par étoiles php
- Jquery notation - Meilleures réponses
- Notation étoile html - Meilleures réponses
- Javascript : Système de notation par étoiles - CodeS SourceS - Guide
- Javascript : Notation avec étoiles et possibilité de modification de la note - CodeS S - Guide
- PHP : Module de notation tres complet sans base de donnees - CodeS SourceS - Guide
- PHP : Php system notation - script benchmark - CodeS SourceS - Guide
- PHP : Notation cidr des adresses ipv4 - CodeS SourceS - Guide
mais comment la note est conservée ?
fichier ? table sql ?
est-ce que le script calcul uniquement la moyenne ou enregistre la note de chaque utilisateur ?
L'idée de départ étant de ne pas avoir besoin de cliquer, je n'ai pas implémenté le clic.
Si l'utilisateur clique cela ne change rien, la position est conservée.
Cependant, si il y a des demandes en ce sens, je peux implémenter le clic.
Je tiens à préciser que l'ensemble des scripts existant notent à partir de 1 (cf celui de ce site), or cela fausse les notations si l'on ne peut pas mettre un zero pointé en notation. Mon script intégre le zero.
Cordialement
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.