Transformer un nombre en affichage de nombre d’étoiles en utilisant jQuery et CSS

Question

J’ai été en regardant plugin jquery et était demandais comment adapter ce plugin pour transformer un nombre (comme 4.8618164) en un 4.8618164 étoiles rempli sur 5. Interprétant essentiellement un nombre

Notez qu’il serait uniquement affichage/afficher les étoiles de notation d’un nombre déjà disponibles et pas accepter des présentations de nouvelles cotes.

Answer 1

Voici une solution pour vous, en utilisant seulement un très petit et simple de l'image et générée automatiquement élément span:

CSS

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

Image

Remarque: ne PAS hotlink à l'image ci-dessus! Copiez le fichier sur votre propre serveur et de l'utiliser à partir de là.

jQuery

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

Si vous voulez restreindre les étoiles pour seulement la moitié ou un quart de star tailles, ajoutez l'un de ces lignes avant de l' var size ligne:

val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */

HTML

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

L'utilisation de la

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

Sortie

Démo

http://www.ulmanen.fi/stuff/stars.php

Ce sera probablement fonction de vos besoins. Avec cette méthode, vous n'avez pas à calculer les trois quart ou autres joyeusetés star largeurs, juste lui donner un flotteur et il va vous donner vos stars.

---

Une petite explication sur la façon dont les étoiles sont présentées peut être dans l'ordre.

Le script crée deux au niveau du bloc des éléments span. Les deux travées initally obtenir une taille de 80px * 16px et une image d'arrière-plan des étoiles.png. Les travées sont imbriqués, de sorte que la structure de travées ressemble à ceci:

<span class="stars">
    <span></span>
</span>

L'extérieur span obtient un background-position de 0 -16px. Qui rend le gris étoiles à l'extérieur span visible. Comme l'extérieur span a la hauteur de 16px et repeat-x, il n'affiche que 5 gris étoiles.

L'intérieure de la durée de l'autre main a un background-position de 0 0 qui ne fait que les étoiles jaunes visibles.

Ce serait bien de travailler avec deux images, star_yellow.png et star_gray.png. Mais comme les étoiles ont une hauteur fixe, nous pouvons facilement les combiner en une seule image. Ceci utilise le CSS sprite technique.

Maintenant, les travées sont imbriqués, ils sont automatiquement superposés les uns sur les autres. Dans le cas par défaut, lorsque la largeur de deux extensions est 80px, les étoiles jaunes de masquer complètement le gris étoiles.

Mais si l'on ajuste la largeur de l'intérieur de la durée de la largeur des étoiles jaunes diminue, révélant le gris étoiles.

Accessibilité-sage, il aurait été plus sage de laisser le nombre à virgule à l'intérieur de l'intérieure de la durée et de le cacher avec text-indent: -9999px, de sorte que les gens avec CSS désactivée, permettrait au moins de voir le nombre à virgule flottante à la place des étoiles.

J'espère que ça avait un sens.

---

Mise à jour 2010/10/22

Maintenant encore plus compact et plus difficile à comprendre! Peut également être réduits à une seule ligne:

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

Answer 2

Pourquoi ne pas simplement les cinq images d'une étoile (vide, d'un quart de plein, à moitié plein, les trois-quart de la pleine et complète) ensuite, il suffit d'injecter les images dans votre DOM selon le tronquée ou rouded valeur de l'évaluation multiplié par 4 (pour obtenir un ensemble de nombre pour les trimestres)?

Par exemple, 4.8618164 multiplié par 4 et arrondi est de 19 qui serait de quatre et de trois quart des étoiles.

Sinon (si vous êtes paresseux comme moi), il suffit d'avoir une image sélectionnée à partir de 21 (0 à 5 étoiles dans un quart d'échelon) et sélectionnez l'image unique basé sur la dite valeur. Ensuite, c'est juste un calcul suivie par un changement d'image dans les DOM (plutôt que d'essayer de changer cinq images différentes).