Rating (votazione a stelle) con javascript e Font Awersome

Discussione in 'Snippet Javascript' iniziata da filomeni, 18 Dicembre 2015.

  1. filomeni

    filomeni Moderatore Membro dello Staff MOD

    Registrato:
    14 Maggio 2006
    Messaggi:
    1.039
    Mi Piace Ricevuti:
    6
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    Web Developer
    Località:
    Roseto degli Abruzzi (TE)
    Home Page:
    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>
    
     
  2. filomeni

    filomeni Moderatore Membro dello Staff MOD

    Registrato:
    14 Maggio 2006
    Messaggi:
    1.039
    Mi Piace Ricevuti:
    6
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    Web Developer
    Località:
    Roseto degli Abruzzi (TE)
    Home Page:
    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
     
Sto caricando...

Condividi questa Pagina