Trasforma un numero in visualizzazione di stelle usando jQuery e CSS

Stavo guardando il plugin jQuery e mi chiedevo come adattare quel plugin per trasformare un numero (come 4.8618164) in un 4.8618164 stelle riempite su 5. Fondamentalmente interpretando un numero <5 in stelle inserite in un sistema di valutazione a 5 stelle usando jQuery / JS / CSS.

Si noti che questo mostrerebbe / mostrerà la valutazione delle stelle solo da un numero già disponibile e non accetterà nuovi invii di valutazioni.

Ecco una soluzione per te, utilizzando solo un’immagine molto piccola e semplice e un elemento di span generato 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; } 

Immagine

alt text http://sofit.miximages.com/rating/stars.gif

Nota: NON colbind hotlink all’immagine sopra! Copia il file sul tuo server e usalo da 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 = $('').width(size); // Replace the numerical value with stars $(this).html($span); }); } 

Se vuoi limitare le stelle alle sole dimensioni di metà o quarto, aggiungi una di queste righe prima della riga della var size :

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

HTML

 4.8618164 2.6545344 0.5355 8 

uso

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

Produzione

Immagine dal set di icone di fuga (www.pinvoke.com) http://sofit.miximages.com/rating/stars_output.png

dimostrazione

http://sofit.miximages.com/rating/pp Lo script crea due elementi di estensione a livello di blocco. Entrambe le estensioni ottengono inizialmente una dimensione di 80 px 16 px e un’immagine di sfondo stars.gif. Gli span sono nidificati, in modo che la struttura degli span assomigli a questo:

    

L’ 0 -16px esterna ottiene una background-position di background-position di 0 -16px . Ciò rende visibili le stelle grigie nell’estremità esterna. Poiché l’estensione esterna ha un’altezza di 16px e repeat-x , mostrerà solo 5 stelle grigie.

L’interno ha invece una background-position di background-position di 0 0 che rende visibili solo le stelle gialle.

Ciò funzionerebbe naturalmente con due file immagine separati, star_yellow.png e star_gray.png. Ma poiché le stelle hanno un’altezza fissa, possiamo facilmente combinarle in un’unica immagine. Questo utilizza la tecnica CSS sprite .

Ora, quando gli span sono nidificati, vengono automaticamente sovrapposti l’uno sull’altro. Nel caso predefinito, quando la larghezza di entrambi gli span è 80px, le stelle gialle oscurano completamente le stelle grigie.

Ma quando regoliamo la larghezza dell’intervallo interno, la larghezza delle stelle gialle diminuisce, rivelando le stelle grigie.

Per quanto riguarda l’accessibilità, sarebbe stato più saggio lasciare il numero di float all’interno dell’intervallo interno e nasconderlo con text-indent: -9999px , in modo che le persone con i CSS distriggersti ​​vedessero almeno il numero in virgola mobile invece delle stelle.

Spero che abbia avuto un senso.


Aggiornato il 2010/10/22

Ora ancora più compatto e più difficile da capire! Può anche essere spremuto a un solo rivestimento:

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

Se devi solo supportare i browser moderni, puoi farcela con:

  • Nessuna immagine;
  • Css prevalentemente statici;
  • Quasi nessun jQuery o Javascript;

Devi solo convertire il numero in una class , ad es. class='stars-score-50' .

Prima una demo del markup “renderizzato”:

 body { font-size: 18px; } .stars-container { position: relative; display: inline-block; color: transparent; } .stars-container:before { position: absolute; top: 0; left: 0; content: '★★★★★'; color: lightgray; } .stars-container:after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden; } .stars-0:after { width: 0%; } .stars-10:after { width: 10%; } .stars-20:after { width: 20%; } .stars-30:after { width: 30%; } .stars-40:after { width: 40%; } .stars-50:after { width: 50%; } .stars-60:after { width: 60%; } .stars-70:after { width: 70%; } .stars-80:after { width: 80%; } .stars-90:after { width: 90%; } .stars-100:after { width: 100; } 
 Within block level elements: 
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★

Or use it in a sentence: ★★★★★ (cool, huh?).

Prova questa funzione jquery

    

Immagine dello schermo

FontAwesome CSS

Puoi scaricare FontAwesome su http://fontawesome.io/

Perché non avere solo cinque immagini separate di una stella (vuota, piena di quarti, mezza piena, piena di tre quarti e piena), quindi iniettare le immagini nel DOM in base al valore troncato o decrescente della valutazione moltiplicato per 4 ( ottenere un numero intero per i quarti)?

Ad esempio, 4.8618164 moltiplicato per 4 e arrotondato è 19, che sarebbe quattro e tre quarti di stelle.

In alternativa (se sei pigro come me), basta avere un’immagine selezionata tra 21 (da 0 a 5 stelle in incrementi di un quarto) e selezionare l’immagine singola in base al valore summenzionato. Quindi è solo un calcolo seguito da un cambio di immagine nel DOM (piuttosto che provare a cambiare cinque immagini diverse).

Ho finito per andare totalmente JS-free per evitare il ritardo di rendering sul lato client. Per farlo, genero HTML come questo:

    

Per facilitare l’accessibilità, aggiungo addirittura il valore di valutazione non elaborato nell’attributo del titolo.

usando jquery senza prototipo, aggiorna il codice js a

 $( ".stars" ).each(function() { // Get the value var val = $(this).data("rating"); // 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 = $('').width(size); // Replace the numerical value with stars $(this).html($span); }); 

Ho anche aggiunto un attributo dati con il nome di data-rating nello span.

  

DEMO

Puoi farlo solo con 2 immagini. 1 stelle vuote, 1 stelle piene.

Sovrapponi l’immagine riempita sopra l’altra. e convertire il numero di valutazione in percentuale e utilizzarlo come larghezza dell’immagine di riempimento.

inserisci la descrizione dell'immagine qui

 .containerdiv { border: 0; float: left; position: relative; width: 300px; } .cornerimage { border: 0; position: absolute; top: 0; left: 0; overflow: hidden; } img{ max-width: 300px; }