Rating (votazione a stelle) con javascript e Font Awersome

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
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

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Sistema di votazione a stelle - star rating PHP 1
tritabit [HTML] Visualizzare stelle tipo rating HTML e CSS 5
filippino Rating stato d'animo degli utenti a fine post WordPress 1
P Script sistema rating PHP 0
I Rating Programmatore Discussioni Varie 16
J Rating star script Javascript 0
J problemi con Unobtrusive AJAX Star Rating Bar Ajax 0
C PHP-NUKE: I blocchi LINKS CORRELATI e ARTICLE RATING PHP 0
F Votazione con stelle PHP 6
A Wordpress votazione e commenti video WordPress 2
felino Presentazione foto e sistema di votazione PHP 2
M Inserire votazione sotto ciascuna immagine PHP 9
Alessandro Le Mura Sistema votazione mysql - php a stelle PHP 3
A Problema votazione cms pligg CMS (Content Management System) 4
L Sistema di votazione PHP 32
I Sistema di votazione (era: Aiuto) PHP 2
D Sistema votazione,aiuto con voti doppi PHP 6
S Sistema di votazione recensione Classic ASP 3
A Modificare votazione nella sezione TopSite PHP 0
nopolice RECENSIONI 5 STELLE Offerte e Richieste di Lavoro e/o Collaborazione 8
S Vendo recensioni 5 stelle alle vostre pagine FB Annunci servizi di Social Media Marketing 2
I voto sito web con stelle Javascript 0
S VENDO PAGINA ''Colpa delle stelle'' 60k. Vendere e Acquistare pubblicita' online 0
S [compro] recensioni 5 stelle pagina facebook Annunci servizi di Social Media Marketing 0
M PHP su sistema votazioni configurabile a 5/10 stelle PHP 0
A Hotel Diana: hotel tre stelle vicino al mare per le tue vacanze a Jesolo Lido. Presenta il tuo Sito 2
A Hotel Regina: hotel 4 stelle lusso con sala conferenze in centro a Milano. Presenta il tuo Sito 0

Discussioni simili