Jquery Dropdowns Con Supporto Touch
Febbraio 21, 2012 Nessuno Commento
Ecco un codice Jquery molto semplice che permette di avere dropdowns con il supporto touch per Ipad e Iphone e tutti gli altri dispositivi con eventi touch.
Per prima cosa aggiungi la classe touchdropdown ai tag Html che hanno gli eventi mouseenter e mouseleave:
<div id="mydropdown" class="touchdropdown"></div>Poi aggiungi questo codice ai tuoi script Javascript:
if("ontouchstart" in window){ $("html").addClass('touch'); } $(".touch .touchdropdown").on('mouseenter', function(e) { $(this).data("touch",0); }); $(".touch .touchdropdown").on('click', function(e) { $(this).data("touch",$(this).data("touch")+1);; if($(this).data("touch")!=2){return false;} });
Ora puoi costruire il tuo dropdown usando eventi mouseenter e mouseleave:
$("#mydropdown").on('mouseenter', function(e) { }); $("#mydropdown").on('mouseleave', function(e) { });
Usualmente si costruisce un dropdown con eventi mouseenter e mouseleave ma usando dispositivi touch il dropdwon non funziona perchè si hanno solo eventi click e touch.
Il codice precedente non fa altro che contare quanti click gli item .touchdropdown hanno avuto e esegue il codice sul click solo se sono gia stati cliccati una volta, implementando cisì il dropdown con solo touch clicks. Per vedere il codice in azione vedi il menu principale del sito Palomar.