Comment convertir des notes numériques en notes par étoiles à l'aide de jQuery et CSS ?

Conversion de nombres en notes par étoiles : une solution polyvalente utilisant jQuery et CSS

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.

Définition CSS

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.

Exigences relatives à l'image

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.

Implémentation de jQuery

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);
    });
}

Utilisation HTML

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>

Invocation

Déclenchez le plugin en utilisant ce qui suit code :

$(function() {
    $('span.stars').stars();
});

Considérations sur l'accessibilité

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.

Conclusion

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!