Hier ist eine Lösung für Sie, bei der nur ein sehr kleines und einfaches Bild und ein automatisch generiertes Span-Element verwendet werden:
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;
}
Bild
(Quelle: ulmanen.fi )
Hinweis: Sie NICHT hotlink das obige Bild! Kopieren Sie die Datei auf Ihren eigenen Server und verwenden Sie sie von dort aus.
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);
});
}
Wenn Sie die Sterne auf nur halbe oder viertel Sterngrößen beschränken möchten, fügen Sie vor der var sizeZeile eine dieser Zeilen hinzu :
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>
Verwendung
$(function() {
$('span.stars').stars();
});
Ausgabe
(Quelle: ulmanen.fi )
Demo
http://www.ulmanen.fi/stuff/stars.php
Dies wird wahrscheinlich Ihren Bedürfnissen entsprechen. Mit dieser Methode müssen Sie keine Dreiviertel- oder andere Sternbreiten berechnen. Geben Sie einfach einen Float und Sie erhalten Ihre Sterne.
Eine kleine Erklärung, wie die Sterne dargestellt werden, könnte angebracht sein.
Das Skript erstellt zwei Span-Elemente auf Blockebene. Beide Bereiche erhalten zunächst eine Größe von 80px * 16px und ein Hintergrundbild stars.png. Die Bereiche sind verschachtelt, sodass die Struktur der Bereiche folgendermaßen aussieht:
<span class="stars">
<span></span>
</span>
Die äußere Spannweite erhält eine background-positionvon 0 -16px. Das macht die grauen Sterne in der äußeren Spanne sichtbar. Da die äußere Spannweite eine Höhe von 16 Pixel hat und repeat-xnur 5 graue Sterne angezeigt werden.
Die innere Spannweite hat dagegen eine, background-positionvon 0 0der nur die gelben Sterne sichtbar sind.
Dies würde natürlich mit zwei separaten Bilddateien funktionieren, star_yellow.png und star_gray.png. Da die Sterne jedoch eine feste Höhe haben, können wir sie leicht zu einem Bild kombinieren. Dies nutzt die CSS-Sprite-Technik .
Wenn die Bereiche verschachtelt sind, werden sie automatisch übereinander gelegt. Im Standardfall, wenn die Breite beider Bereiche 80 Pixel beträgt, verdecken die gelben Sterne die grauen Sterne vollständig.
Wenn wir jedoch die Breite der inneren Spanne anpassen, nimmt die Breite der gelben Sterne ab und zeigt die grauen Sterne.
In Bezug auf die Barrierefreiheit wäre es klüger gewesen, text-indent: -9999pxdie Gleitkommazahl innerhalb der inneren Spanne zu belassen und mit auszublenden , damit Personen mit deaktiviertem CSS zumindest die Gleitkommazahl anstelle der Sterne sehen.
Hoffentlich machte das Sinn.
Aktualisiert am 22.10.2010
Jetzt noch kompakter und schwerer zu verstehen! Kann auch zu einem Einzeiler zusammengedrückt werden:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
