Lors de la conception d'interfaces utilisateur, il devient souvent nécessaire de représenter des notes numériques à l'aide d'étoiles. Malgré la disponibilité des plugins jQuery, adapter ces plugins pour afficher des notes par étoiles basées sur un nombre donné peut être une tâche difficile. Cet article explore une solution robuste à ce défi, en utilisant une combinaison de CSS, jQuery et une image prédéfinie.
Pour styliser les notes par étoiles, les règles CSS suivantes sont employé :
span.stars, span.stars span { display: block; background: url(stars.png) 0 -16px repeat-x; width: 80px; height: 16px; } span.stars span { background-position: 0 0; }
Dans ce bloc CSS, la durée externe (span.stars) agit comme un conteneur pour les étoiles individuelles (span.stars span). Les deux éléments sont définis en tant qu'éléments de niveau bloc et reçoivent une image d'arrière-plan stars.png avec des décalages et des modèles de répétition spécifiques.
Le fichier image, stars.png, sert de sprite qui contient des images d'étoiles jaunes (remplies) et grises (vides). Cette image doit être stockée sur le serveur de l'utilisateur ; la création de liens vers l'image fournie n'est pas recommandée.
La fonctionnalité de base est implémentée à l'aide d'un plugin jQuery nommé $.fn.stars. Ce plugin parcourt chaque élément avec les étoiles de classe et convertit son contenu numérique en un affichage de classement par étoiles. Le calcul détermine la largeur des étoiles jaunes en fonction du nombre donné, garantissant une représentation proportionnelle.
$.fn.stars = function() { return $(this).each(function() { // Get the value var val = parseFloat($(this).html()); // Make sure that the value is in 0 - 5 range, multiply to get width var size = Math.max(0, (Math.min(5, val))) * 16; // Create stars holder var $span = $('<span />').width(size); // Replace the numerical value with stars $(this).html($span); }); }
Pour utiliser ce plugin, appliquez simplement les étoiles de classe aux travées contenant les notes numériques.
<span class="stars">4.8618164</span> <span class="stars">2.6545344</span> <span class="stars">0.5355</span> <span class="stars">8</span>
Déclenchez le plugin en utilisant ce qui suit code :
$(function() { $('span.stars').stars(); });
Pour garantir l'accessibilité, il est recommandé de conserver la valeur numérique d'origine dans l'élément span mais de la masquer visuellement à l'aide de text-indent: -9999px. Cette approche permet aux lecteurs d'écran et aux utilisateurs dont CSS est désactivé d'accéder aux données sous-jacentes.
Cette solution convertit efficacement les notes numériques en notes par étoiles à l'aide de jQuery et CSS, ce qui en fait un outil polyvalent d'affichage. évaluations et commentaires des utilisateurs dans diverses applications Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!