Simulare le select dei form con jQuery e CSS
Le select box sono gli elementi più difficilmente personalizzabili dei form HTML, sebbene esistano ormai diversi plug-in capaci di offrire un buon risultato finale. Personalmente, tuttavia, sono sempre a favore delle soluzioni sviluppate in casa: vediamo come simulare le select, avvalendoci di jQuery e dei CSS3.
Attenzione: quando dico "simulare", ovviamente, non intendo avere un effetto ottico fine a se stesso, bensì un prodotto utile al suo scopo, ma più bello, o comunque in linea con lo stile del proprio sito.
Questo è il risultato finale:
Iniziamo, come di consueto, dalla struttura HTML della select box:
<html>
<head>
<title>Simulare le select dei form con jQuery e CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="modulo">
<div class="select">
<input type="hidden" id="colore" name="colore">
<span id="colori">Scegli un colore...</span>
<div>
<a href="javascript:void(0)" id="Rosso">Rosso</a>
<a href="javascript:void(0)" id="Giallo">Giallo</a>
<a href="javascript:void(0)" id="Verde">Verde</a>
<a href="javascript:void(0)" id="Blu">Blu</a>
</div>
</div>
</form>
<div><a href="javascript:alert('Colore: ' + $('#colore').val());">Verifica il colore scelto...</a></div>
</body>
</html>
Dov'è il tag <select>? Non c'è, non ci serve! Al suo posto nidifichiamo una serie di <div> ed utilizziamo una casella di testo nascosta per raccogliere il valore che sarà poi inviato attraverso il form. Valore che viene assegnato ai singoli item attraverso l'attributo ID.
Nell'intestazione della pagina richiamiamo il foglio di stile, la libreria jQuery ed il nostro file Javascript. Alla fine della pagina, dopo il form, utilizziamo un semplice link di esempio per verificare che il valore raccolto dalla nostra select sia corretto.
Passiamo alla stilizzazione:
body { background: #EEEEEE; margin: 10px; }
h1, div { color: #000000; margin: 0px 0px 10px 0px; }
h1 { font: bold 25px arial; }
div { font: normal 13px arial; }
a { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; }
form { margin: 0px 0px 10px 0px; }
/* FINE DEGLI STILI PERSONALIZZABILI */
.select
{
background: #FFFFFF url(arrow.png) no-repeat 290px;
color: #000000;
padding: 5px;
width: 300px;
font: normal 13px verdana;
border: solid 1px #000000;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.select div
{
position: absolute;
background: #FFFFFF;
width: 300px;
padding: 5px;
margin: 0px 0px 0px -6px;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
border-bottom: solid 1px #000000;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.select div a
{
display: block;
color: #000000;
text-decoration: none;
padding: 5px;
}
.select div a:hover
{
background: #EEEEEE;
color: #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
La prima parte di codice, coi comandi scritti sulla stessa riga, sono delle stilizzazioni generiche della pagina. A seguire, dopo il commento, troviamo i comandi utili allo scopo in oggetto a questo articolo.
Per prima cosa, procuriamoci un'immagine che chiameremo "arrow.png" che rappresenterà la freccetta indicativa del fatto che bisogna cliccare per scorrere la tendina. Per le caratteristiche dell'esempio, consiglio un'immagine di 15X15 pixel.
Concludiamo col motore dell'applicazione, il codice Javascript/jQuery:
$(document).ready(function(){
$(".select div").hide();
$(".select").click(function(){
$(".select div").fadeToggle(500);
});
$(".select div a").click(function(){
$("#colore").val($(this).attr("id"));
$("#colori").html($(this).attr("id"));
});
});
Per prima cosa, nascondiamo il contenuto della tendina, quindi gli item della select. Al click sull'oggetto, con un gradevole effetto dissolvenza, mostriamo o nascondiamo la tendina a seconda del numeri di click dell'utente (come in una normale select box). Al click su un item, impostiamo il valore scelto all'interno della select chiusa, quindi lo memorizziamo all'interno della casella di testo nascosta.
L'esempio potrebbe avere qualche problema di compatibilità con versioni di Internet Explorer inferiori alla 10. clicca qui per vedere l'effetto.
