Maison > interface Web > tutoriel CSS > Comment convertir des notes numériques en notes par étoiles à l'aide de jQuery et CSS ?

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

DDD
Libérer: 2024-12-17 04:24:25
original
946 Les gens l'ont consulté

How to Convert Numeric Ratings to Star Ratings Using jQuery and 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;
}
Copier après la connexion

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);
    });
}
Copier après la connexion

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>
Copier après la connexion

Invocation

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

$(function() {
    $('span.stars').stars();
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal