Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • GDPR
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → jQuery → Articoli → Simulare le select dei form con jQuery e CSS

Simulare le select dei form con jQuery e CSS

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteUn iframe in overlay centrato nello schermo
  • SuccessivoBottone "Torna in alto" a comparsa e con scroll animato
  • Pubblicato il
  • 16/04/2014
  • Autore
  • Luca Ruggiero

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.

Continua dopo la pubblicità...

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.

Naviga tra i contenuti

← Un iframe in overlay centrato nello schermo
→ Bottone "Torna in alto" a comparsa e con scroll animato

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Frequenta i nostri corsi
  • Corso JavascriptCorso Javascript
    Creare pagine web ed interfacce utente interattive. A partire da 39 €
  • Corso jQueryCorso jQuery
    Creare applicazioni client-side col Framework jQuery. A partire da 39 €
Vedi anche...
  • Tooltip con jQuery, HTML5 e CSS3
  • Bottone "Torna in alto" a comparsa e con scroll animato
  • Un iframe in overlay centrato nello schermo
  • Un news ticker con jQuery e vTicker
  • Turn.js: effetto flip con jQuery ed HTML5
Guide
  • Guida jQuery
  • Guida jQuery UI
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie
Altro: sondaggi / feed