Attraverso l’uso di jQuery è possibile preparare delle applicazione che, supportate da un linguaggio server side come PHP, possono rivelarsi rapide da reallizzare, sicure e soprattutto piacevoli da guardare. Vediamo come realizzare in pochissime righe un sistema di votazione attraverso l’uso della funzione animate(). Va detto fin da subito che quello che analizzeremo è solamente uno spunto e non si tratta quindi di un prodotto pronto e finito!
Realizzare il sistema di votazione / sondaggio
Il markup HTML sarà molto semplice:
<div id="container"> <span class="domanda">Qual è il tuo CMS preferito?</span> <div><span>0</span><a href="javascript:void(0)">Vota</a>Wordpress</div> <div><span>0</span><a href="javascript:void(0)">Vota</a>Drupal</div> <div><span>0</span><a href="javascript:void(0)">Vota</a>Joomla</div> </div>
Il CSS
Il CSS sarà altrettanto semplice e personalizzabile. Quello che andremo a fare sarà realizzare delle barre che si espandono al click, di conseguenza via jQuery andremo a modificare poi la larghezza delle barre stesse del sondaggio.
#container {
margin-top: 20px;
color: #fff;
}
#container .domanda {
display: block;
padding: 20px;
font-weight: bold;
letter-spacing: -3px;
margin-bottom: 20px;
padding: 10px;
font-size: 40px;
}
#container div {
font-weight: bold;
letter-spacing: -3px;
background: #F90;
margin-bottom: 15px;
padding: 10px;
font-size: 34px;
color: #ffffff;
border-left: 20px solid #333;
width: 400px;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
#container div a {
border-radius: 10px;
text-decoration: none;
color: #f90;
padding: 5px 15px;
background: #333;
margin: 0 20px;
}
#container div a:hover {
color: #fff;
}jQuery animate, per animare le nostre barre
$("#container div a").click(function() {
$(this).parent().animate({
width: '+=20px'
}, 500);
$(this).prev().html(parseInt($(this).prev().html()) + 1);
return false;
});Attraverso questo semplice script ci preoccupiamo di due cose sostanzialmente. La prima è quella di aumentare la dimensione della barra sulla quale clicchiamo. Con la funzione parent() infatti risaliamo all’elemento genitore del DOM (il div nel nostro caso) e ne modifichiamo la “width” incrementandola di 20px (con una velocità di 500 millisecondi). In seguito invece, ci preoccupiamo di controllare il contenuto html dell’elemento precedente (usando la funzione prev()) e di aumentarlo di un’unità. Et voilà il gioco è fatto!
PS: parseInt è una funzione Javascript che trasforma in numero l’elemento target.
Per concludere, possibili implementazioni
Se volessimo sfruttare dinamicamente lo script sarà inevitabile modificare alcuni parametri. Dovremo per esempio fare in modo che non sia possibile effettuare più di un solo click utilizzando dei controlli sull’IP oppure sulle sessioni. Inoltre dovremo salvare i valori immessi in un database ed infine preoccuparci di impostare un limite per non “uscire” dalla nostra pagina! In questo modo realizzeremmo un sistema di sondaggio carino e funzionale!
Tuttavia, sebbene quello visto non sia uno script con un diretto risvolto pratico, a mio avviso offre uno spunto interessante sul possibile utilizzo della funzione animate di jQuery. E tu che cosa ne pensi? Come pensi di poter riutilizzare questo meccanismo?
