cssRating: votare con stelle in puro CSS3 (no Javascript! no Script! solo Radio Button)

Il nome attira e così anche questo codice: in poco meno di 60 righe avrete un sistema di votazione a stelle SENZA IMMAGINI, JAVASCRIPT, JQUERY O SCRIPT ESTERNI!!

STA TUTTO IN QUESTE POCHE RIGHE!

Il codice è semplicissimo. L’ho inserito in una funzione che basterà richiamare per avere le nostre stelle:


function cssRating($name='voto'){
  $return = "
    <style>
    .rating {
     float:left;
    }
    .rating:not(:checked) > input {
      position:absolute;
      top:-9999px;
      clip:rect(0,0,0,0);
    }
    .rating:not(:checked) > label {
      float:right;
      width:1em;
      padding:0 .1em;
      overflow:hidden;
      white-space:nowrap;
      cursor:pointer;
      font-size:200%;
      line-height:1.2;
      color:#ddd;
      text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
    }
    .rating:not(:checked) > label:before {
      content: '★ ';
    }
    .rating > input:checked ~ label {
      color: #f70;
      text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
    }
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
      color: gold;
      text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }
    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
      color: #ea0;
      text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }
    .rating > label:active {
      position:relative;
      top:2px;
      left:2px;
    }
    </style>";
  $return .= '<fieldset class="rating">
    <input type="radio" id="star5" name="'.$name.'" value="5" /><label for="star5" title="Ottimo">5 stars</label>
    <input type="radio" id="star4" name="'.$name.'" value="4" /><label for="star4" title="Notevole">4 stars</label>
    <input type="radio" id="star3" name="'.$name.'" value="3" checked="checked" /><label for="star3" title="Buono">3 stars</label>
    <input type="radio" id="star2" name="'.$name.'" value="2" /><label for="star2" title="Non è il massimo">2 stars</label>
    <input type="radio" id="star1" name="'.$name.'" value="1" /><label for="star1" title="Sconsigliato">1 star</label>
    </fieldset>';
  return $return;
}

Quando volete usarlo vi basterà richiamarlo con:

<?php echo cssRating(); ?>

Messo in un form vi passerà il valore scelto sotto il nome di “voto”. Se lo volete cambiare basterà passare il nuovo “name=”

<?php echo cssRating('valutazione'); ?>

RAPIDO E TUTTO QUI! NULLA DI PIU’! 🙂 Geniale…

Annunci

, , , , , , , , , , , ,

  1. #1 di kowa il 05/03/2014 - 09:46

    Grazie dello script, è possibile invece creare uno script con due sole “scelte”? (pollice su e pollice giù ad esempio).

    • #2 di portapipe il 20/03/2014 - 07:55

      Ti ho risposto 2 volte (grrrr) dannato WP! 🙂
      Ti scrissi tutto il codice e le possibilità. Puoi usare un checkbox per quello o due semplici link che inviano in modo asincrono la scelta dell’utente.
      Se non sai come fare ho fatto un articolo a riguardo (https://portapipe.wordpress.com/2013/11/12/invio-form-in-ajax-in-25-righe-universali/).
      L’ultimo caso è modificare lo script di questo articolo così da avere 2 scelte: pollice in su e pollice in giù. Uno darà 0 e l’altro 1.
      Ci sono più soluzioni: scegli quella più adatta alle tue esigenze 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: