1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Système de notation par étoiles survolées avec jquery

Système de notation par étoiles survolées avec jquery

Soyez le premier à donner votre avis sur cette source.

Vue 17 087 fois - Téléchargée 2 176 fois

Télécharger le projet
Commenter

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/

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
alberto
Modifié par alberto le 27/01/2016 à 18:06
Simple efficace et rapidement adaptable, merci beaucoup pour cette astuce.
test2webmaster
24 avril 2013 à 21:42
et comment on sauvegarde les votes ?
ekirom
Messages postés
3
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
2 mai 2011
2 mai 2011 à 15:07
Comment envoyer la note attriuée à l'etoile dans une table de base de données ? Merci.
rayman223
Messages postés
24
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
7 avril 2013
11 août 2010 à 03:32
Je n'ai pas regardé en profondeur car il est 3h30 du mat :p
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 ?
Visibeo
Messages postés
6
Date d'inscription
lundi 2 août 2010
Statut
Membre
Dernière intervention
5 août 2010
5 août 2010 à 14:57
Bonjour,

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
Afficher les 6 commentaires
S'inscrire maintenant

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.