Realizzare select multilingue con Jquery

In questo articolo vedremo come realizzare un selettore multilingue con html, css e jquery, per vedere l’ esempio completo visitate la demo.

Per questo tutorial ho utilizzato world-flags-sprite, una soluzione css che offre una vasta gamma di bandiere di numerosi stati attraverso la tecnica degli sprites css, consiglio vivamente questa soluzione che permette di aggiungere facilmente le immagini per nuove lingue.
Iniziamo creando un nuovo file html in cui inseriremo il nostro markup. L’esempio qui proposto è pensato in chiave statica ma può essere facilmente applicato anche a pagine dinamiche gestendo l’output del testo e delle classi.

HTML

<ul>
<li>
<a href="http://www.mywebsite.it/index.html?lang=it" title="Italy">
<span></span>Italy
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=us" title="Usa">
<span></span>Usa
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=uk" title="England">
<span></span>England
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=fr" title="France">
<span></span>France
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=es" title="Spain">
<span></span>Spain
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=de" title="Germany">
<span></span>Germany
</a>
</li>
</ul>

Definiamo una lista non ordinata con all’interno degli elementi “li” che conterranno le singole lingue. In ogni singola voce definiamo un link che conterrà l’url al sito nella rispettiva lingua.In questo esempio ogni link rimanda ad una pagina fittizia a cui viene aggiunta una variabile per la selezione della lingua. Nel link inseriremo un elemento span che utilizzaremo come contenitore per l’immagine della bandiera e il testo della lingua.

Le classi presenti sull’elemento “ul” sono relative al layout della lista (.langSelect) e al template applicato (“.black”,”.white” oppure “.grey”). Le classi “.f16″ e “flag” sono relative a flags16.css e servono per mostrare l’immagine delle rispettive bandiere.

CSS

La prima parte del css è dedicata al template. Colori, bordi e immagini di fondo sono gestiti dalle classi “.black” , “.white” e “.grey”.

/*black theme*/
.black{background-color:#000;border:1px solid #444;}
.black li:first-child{background-position:right top;}
.black a{color:#fff;}
.black a:hover{background:#111;}
.black li:first-child + li{border-top:1px solid #444;}
/*white theme*/
.white{background-color:#eee;border:1px solid #bbb;}
.white li:first-child{background-position:right -25px;}
.white a{color:#333;}
.white a:hover{background:#ddd;}
.white li:first-child + li{border-top:1px solid #bbb;}
/*grey theme*/
.grey{background-color:#ccc;border:1px solid #eee;}
.grey li:first-child{background-position:right -50px;}
.grey a{color:#000;}
.grey a:hover{background:#999;}
.grey li:first-child + li{border-top:1px solid #aaa;}

La seconda parte del css gestisce il layout della lista definendo dimensioni, spaziature e larghezza.

.langSelect{
    width:150px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-align:left;
    list-style:none;
}
.langSelect li{
    line-height:25px;
    position:relative;
}
.langSelect a{
    padding-left:35px;
    position:relative;
    text-decoration:none;
    display:block;
}
.langSelect li:first-child a:hover{
    background:transparent;
}
.langSelect li:first-child{
    background-image:url(../img/bg_lang_select.png);
    background-repeat:no-repeat;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.langSelect li:last-child a:hover{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
.langSelect a span{
    width:16px;
    height:16px;
    position:absolute;
    top:50%;
    margin-top:-8px;
    left:10px;
}

In questo modo è possibile creare stili customizzati in poco tempo e senza dover metter mano al layout.

JQUERY E JAVASCRIPT

Prima di inizare con il codice javascript assicuratevi di aver incluso la libreria jquery nella pagina, la potete trovare sul sito di jquery o in alternativa caricarla attraverso le Google AJAX Libraries API.
Lo script può essere incluso sia internamente che esternamente alla pagina html.

Il codice verifica innanzitutto il caricamento della pagina.

 $(function() {

Una volta certo della presenza degli elementi nel DOM inizia nascondendo tutti gli elementi “li” successivi al primo.

$(“.langSelect li:first-child”).nextAll().hide();

La seguente istruzione verifica l’hover del mouse sulla lista.

 $(".langSelect").hover(function(){

Al mouseover anima gli elementi successivi al primo “li” mostrandoli.

 $(this).find("li:first-child").nextAll().not(":animated").slideDown(500);

Mentre al mouseout li nasconde

 $(this).find("li:first-child").nextAll().not(":animated").slideUp(500);

Una piccola nota su questo passaggio, è possibile notare l’utilizzo di .not(“:animated”) questa aggiunta impedisce che le animazioni partano o si ripetano quando gli elementi sono ancora animati.
Una volta completate le istruzioni sull’animazione definiamo il codice da eseguire al click della singola voce.

 $(".langSelect li").click(function(){

Come prima cosa è necessario verificare se la voce cliccata sia quella già selezionata.

 if($("li").index(this) == 0){

in quel caso annulliamo la chiamata del link e non eseguiamo ulteriori istruzioni

 return false;

In questo caso return false sull’elemento li annulla la chiamata del link al suo interno impedendo la chiamata alla pagina su cui l’utente già si trova.
Nel caso l’utente clicchi su una lingua diversa da quella selezionata spostiamo questa voce come prima della lista.

 $(this).prependTo($(this).parent("ul"));

Subito dopo animo il menu per nascondere le altre lingue.

 $(this).parent("ul").find("li:first-child").nextAll().slideUp(400,

E aggiungo una funzione di callback che al completamento dell’animazione rimanda l’utente all’url presente nel link della lingua cliccata.

 function (){
 location.href = $(this).find("a").attr("href");
 });

Per concludere annullo la chiamata del link tradizionale ed evitare l’immediata chiamata alla pagina in questione.

 return false;

Per vedere l’ esempio completo visitate la demo.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con . Contrassegna il permalink.

7 risposte a Realizzare select multilingue con Jquery

  1. francesco scrive:

    Io userei il click invece dell’hover…se guardi in prospettiva l’evento hover sarà sempre meno usato.. I dispositivi con schermo touch non potranno cambiare lingua!
    (sulla pagina demo c’è un errore nel link che va al sito “htttp://www.howtoweb.it/”)

    Comunque ottimo tutorial!

    • Mauro Accornero scrive:

      Concordo che il click sia più appropriato rispetto all’hover, soprattutto come dici tu nell’ottica di device mobili. L’intenzione di per se era quella di velocizzare la selezione della lingua da parte dell’utente su un browser, su un cellulare per esempio credo sia indispensabile fornire soluzioni meno onerose a livello di richieste e tempi di rendering. Detto questo l’evento click è sicuramente preferibile perchè meno “incidentale” rispetto all’hover e sicuramente di più facile gestione a livello di codice. Su un select per le lingue mi son sentito di utilizzarlo, su un menu avrei già qualche pensiero in più in termini di usabilità. Grazie per la segnalazione dei link, ho già provveduto ad aggiornali!

  2. Daniele scrive:

    Ciao,
    complimenti per il lavoro, davvero ottimo. Volevo chiederti se non è un problema un suggerimanto per la questione del click al posto dell’hover.. come faccio a modificare questo aspetto? cioè a mettere l’apertura delle varie lingue quando clicco e non sull’hover?

    grazie. Daniele

    • Mauro Accornero scrive:

      Ti direi di partire da uno script diverso, considerato che il click sulle voci è necessario per selezionare la lingua dovresti gestire il clik per l’apertura in modo che sia differente al click di scelta della lingua. Una soluzione potrebbe essere quella di utilizzare l’evento .toggle() per l’apertura della lista e un click sulle singole voci per la scelta.

  3. Bruno scrive:

    Ciao. Questo script è la ciliegina che mi mancava. Bel lavoro!
    L’ho inserito nell’ header di un sito in wordpress ma putroppo mi rimane aperto, come la tua immagine d’inizio di questo post (selectlanguageImage1.jpg)
    Sto ancora imparando jquery, cosa sbaglio secondo te? grazie
    Bruno

    • Mauro Accornero scrive:

      Ciao Bruno, ti direi di verificare innanzitutto l’inclusione degli script, controlla che l’url che collega il file di jquery ed eventuali altri file javascript alla pagina siano corretti e vengano caricati correttamente (in firefox “visualizza codice” e click sul link al file di jquery all’interno dell’elemento dell’head). Assicurati anche che sia presente un $(document).ready(function(){}) o $(function() {} all’inizio e la sintassi sia corretta. Nel caso sia tutto a posto verifica le sintassi vicino a slideUp e slideDown che si occupano di aprire e chiudere il menu. Per una verifica più accurata ti consigli di utilizzare firebug (http://getfirebug.com/).

  4. Bruno scrive:

    Funziona! Davvero carino questo script!
    Ho scoperto grazie a firebug che la funzione $(document) ecc. non veniva letta correttamente perchè il link al file jquery non stava in cima alla lista sull’header.
    Grazie della disponibilità. Ciao

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>