Aqui está uma solução para você, usando apenas uma imagem muito pequena e simples e um elemento span gerado automaticamente:
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;
}
Imagem
(fonte: ulmanen.fi )
Nota: NÃO faça um hotlink para a imagem acima! Copie o arquivo para seu próprio servidor e use-o a partir daí.
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);
});
}
Se você quiser restringir as estrelas a apenas metade ou um quarto do tamanho da estrela, adicione uma destas linhas antes da var sizelinha:
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>
Uso
$(function() {
$('span.stars').stars();
});
Resultado
(fonte: ulmanen.fi )
Demo
http://www.ulmanen.fi/stuff/stars.php
Isso provavelmente atenderá às suas necessidades. Com este método, você não precisa calcular três quartos ou qualquer outra largura de estrela, apenas dê um ponto flutuante e ele lhe dará suas estrelas.
Uma pequena explicação sobre como as estrelas são apresentadas pode ser adequada.
O script cria dois elementos de amplitude de nível de bloco. Ambos os spans inicialmente têm um tamanho de 80px * 16px e uma imagem de fundo stars.png. Os vãos são aninhados, de modo que a estrutura dos vãos tenha a seguinte aparência:
<span class="stars">
<span></span>
</span>
O vão externo recebe um valor background-positionde 0 -16px. Isso faz com que as estrelas cinzentas no vão externo sejam visíveis. Como o vão externo tem altura de 16 px erepeat-x , ele mostrará apenas 5 estrelas cinza.
O vão interno, por outro lado, tem um background-positionde0 0 que torna visíveis apenas as estrelas amarelas.
É claro que isso funcionaria com dois arquivos de imagem separados, star_yellow.png e star_gray.png. Mas como as estrelas têm uma altura fixa, podemos facilmente combiná-las em uma imagem. Isso utiliza a técnica de sprite CSS .
Agora, conforme os vãos são aninhados, eles são sobrepostos automaticamente. No caso padrão, quando a largura de ambos os vãos é de 80 px, as estrelas amarelas obscurecem completamente as estrelas cinzas.
Mas quando ajustamos a largura do vão interno, a largura das estrelas amarelas diminui, revelando as estrelas cinzas.
Em termos de acessibilidade, teria sido mais sensato deixar o número flutuante dentro do vão interno e ocultá-lo com text-indent: -9999px , para que as pessoas com CSS desativado pudessem pelo menos ver o número de ponto flutuante em vez das estrelas.
Esperançosamente, isso fez algum sentido.
Atualizado em 22/10/2010
Agora ainda mais compacto e difícil de entender! Também pode ser espremido em um forro:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
