Rating (votazione a stelle) con javascript e Font Awersome

filomeni · 18 Dic 2015

Volevo implementare il mio E-Commerce con recensioni e votazione da parte dell'utente... Ho fatto una ricerca in rete riguardo il "rating" a stelle e c'è un fiume di informazioni e servizi anche gratuiti; ma come al solito le cose me le voglio fare io!
Allora senza per perder tempo ecco una paginetta molto semplificata per appunto far capire il funzionamento, tra l'alto banale, della votazione a stelle.
Ho utilizzato la fonte CDN di Font Awersome per "disegnare" le stelle, quindi senza far ricorso a nessun file di tipo immagine, il CDN lo vedete nel codice: font-awesome.min.css.
Quindi con:

Codice:

<i class="fa fa-star-o"></i>

mi vado a costruire la stella, le 5 stellette della votazione a loro volta le ho racchiuse in un tag span e sfruttando il suo id "stella" mi vado a "costruire" a seconda del click dell'utente sulla stella la conformazione stella piena con le funzione javascript

Codice:

function star1()

Al click

Codice:

onclick="star1()"

All'interno del tag span con id stella, viene richiamata la funzione facendo apparire la giusta votazione.

Codice:

document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='1' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star-o' onclick='star2()'></i><i class='fa star   fa-star-o' onclick='star3()'></i><i class='fa star   fa-star-o' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";

Un pizzico di css per il colore e la posizione delle stelle e il resto a voi...
Ovviamente il voto non viene memorizzato, per farlo useremo PHP con MySql, questo lo farò nel prossiomo snippet nella sezione PHP.
Per domande o chiarimenti rimango a disposizione, ecco l'intera pagina.
Ciao

HTML:

<html>
<head>
<!-- Rating con Font Awesome e javascript By FiloWebService.com-->
<script>
function star1(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='1' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star-o' onclick='star2()'></i><i class='fa star   fa-star-o' onclick='star3()'></i><i class='fa star   fa-star-o' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";
	}
	function star2(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='2' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star' onclick='star2()'></i><i class='fa star   fa-star-o' onclick='star3()'></i><i class='fa star   fa-star-o' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";
	}
	function star3(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='3' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star' onclick='star2()'></i><i class='fa star   fa-star' onclick='star3()'></i><i class='fa star   fa-star-o' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";
	}
	function star3(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='3' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star' onclick='star2()'></i><i class='fa star   fa-star' onclick='star3()'></i><i class='fa star   fa-star-o' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";
	}
	function star4(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='4' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star  fa-star' onclick='star2()'></i><i class='fa star   fa-star' onclick='star3()'></i><i class='fa star   fa-star' onclick='star4()'></i><i class='fa star   fa-star-o' onclick='star5()'></i>";
	}
	function star5(){
												
	document.getElementById("star").innerHTML = "<input type='radio' name='rating' value='5' checked style='display:none'><i class='fa fa-star' onclick='star1()'></i><i class='fa star fa-star' onclick='star2()'></i><i class='fa star   fa-star' onclick='star3()'></i><i class='fa star   fa-star' onclick='star4()'></i><i class='fa star   fa-star' onclick='star5()'></i>";
	}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
#star{cursor:pointer}
.star{margin-left:5px}
.rating-wrap{position:absolute;left:50%;top:10%}
.fa{color:#FAAA3C}
</style>
<head>
<body>
     <div class="rating-wrap">
		<p><strong>Dai un voto:</strong></p>
            <span id="star"><i class="fa fa-star-o" onclick="star1()"></i>
            <i class="fa fa-star-o" onclick="star2()"></i>
            <i class="fa fa-star-o" onclick="star3()"></i>
            <i class="fa fa-star-o" onclick="star4()"></i>
            <i class="fa fa-star-o" onclick="star5()"></i>
		</span><!--costruisce con javascript l'input radio per valorizzare le stelle-->

	</div>
</body>
</html>

filomeni · 18 Dic 2015

Volevo aggiungere delle specifiche. Questo sistema mira a dare un voto ad un prodotto o servizio, quindi non è fine a se stesso, la cosa che non avevo detto in precedenza è che c'è una parte nascosta nel codice che serve per dare un valore numerico alla votazione:

Codice:

<input type='radio' name='rating' value='3' checked [B]style='display:none'[/B]>

fate caso alla parte in grassetto del codice, questo campo input ha un valore pari a 3 (quindi consideriamo che l'utente abbia cliccato sulla terza stella e comunque non è visibile ma rappresentato da 3 stelle "piene" e due "vuote":

Codice:

<input type='radio' name='rating' value='3' checked style='display:none'>
<i class='fa fa-star' onclick='star1()'></i>
<i class='fa fa-star' onclick='star2()'></i>
<i class='fa fa-star' onclick='star3()'></i>
<i class='fa fa-star-o' onclick='star4()'>
</i><i class='fa fa-star-o' onclick='star5()'></i>

La classe "fa-star" va a riempire la stella mentre la classe "fa-star-o" lascia la stella "vuota" e in testa al codice appunto il campo input, che necessariamente deve essere un "radio" perchè fa parte del gruppo "rating" (tutte le 5 stelle) ed esprime un valore pari a 3.
Quindi quest'ultimo serve per poi passare il valore della votazione (espressa graficamente con le stelle), tramite un POST ed essere poi memorizzato in database...
Appena pronta la parte PHP farò uno snippet e lo farò presente.
Saluti
Maurizio Filomeni

Cerca

Cerca

Rating (votazione a stelle) con javascript e Font Awersome

filomeni

Moderatore

filomeni

Moderatore

Discussioni simili