Checkbox iPhone/iPad/iOS con jQuery – Crossbrowser

Ho cercato davvero in lungo e in largo ma ho trovato solo vecchi script che entravano in conflitto con le varie versioni dei vari jQuerytools, lightbox, jQuery UI.

Ho deciso quindi di farmi da solo un semplice script che mi permettesse di avere una semplice immagine al posto del solito checkbox a quadratino. I vari css non funzionavano e quindi ho preferito creare un div avente come sfondo un’immagine e un checkbox nascosto che è il nostro vero e proprio checkbox.
E’ talmente semplice che sono convinto funzioni su ogni browser degli ultimi anni (testato con firefox 3.6x, safari 5.x, IE 8).

Come al solito cerco di evitare script esterni (noiosi e impegnativi per cose così semplici) scrivendo poco codice ma efficace al massimo. Non ci sarà l’animazione, come avviene in iOS, del movimento del pulsante ma risulterà comunque efficace (ho preferito evitarlo per avere maggior compatibilità).

L’unico file, aimè, da scaricare è quello del pulsante:

Quando cliccheremo sul div contenente questa immagine, lo sfondo si sposterà, mostrando l’altra opzione e selezionando il checkbox nascosto. Ho aggiunto anche un controllo in caricamento pagina, nel caso il checkbox sia già selezionato  o meno (e mostrando quindi l’immagine relativa).

Vediamo il codice. Iniziamo con jQuery:

<script type="text/javascript">
   // init the checkboxes at dom ready
   $(document).ready( function () {
      startcheckios();
      $('#ckios').click(function(){
         checkios();
      })
      function startcheckios(){
         if($('#checkbox').is(':checked')){
            $('#ckios').css( {backgroundPosition: "0px 0px"} );
         }else{
            $('#ckios').css( {backgroundPosition: "-53px 0px"} )
         }
      }
      function checkios(){
         if($('#checkbox').is(':checked')){
            $('#ckios').css( {backgroundPosition: "-53px 0px"} )
            $('#checkbox').attr('checked', false);
         }else{
            $('#ckios').css( {backgroundPosition: "0px 0px"} );
            $('#checkbox').attr('checked', true);
         }
      }
   });
</script>

Vediamo come in fase di caricamento venga controllato con startcheckios() se il checkbox è selezionato o meno, mostrando la relativa parte di immagine.
Successivamente attiviamo al click del div contenente l’immagine la funzione checkios() che è la funzione principale: controlla che il checkbox nascosto sia selezionato. In caso lo sia (quindi l’immagine mostra ON) verrà mostrata la parte dell’immagine contenente OFF e il checkbox viene deselezionato; viceversa se il checkbox dovesse essere deselezionato, verrà mostrato ON e il checkbox viene selezionato.

E’ semplice da capire, anche a colpo d’occhio: viene spostata la posizione dell’immagine di sfondo di 53 pixel, mostrando OFF, altrimenti la posizione 0, mostrando così ON.

Passiamo all’html (ho preferito includere i css in linea):

<p>
<div id="ckios" style="width:94px; height:27px; background-image:url(images/iphone_switch.png); background-repeat:no-repeat;"></div>
<input type="checkbox" id="checkbox" name="checkbox" style=" display:none;" checked="checked" />
</p>

Inseriti in un paragrafo <p>, per migliorare l’ordine ma potete eliminarlo, vi sono un div e un checkbox.

Il div, con id ckios, sarà il contenitore della nostra immagine. Sarà largo 94px e alto 27. L’indirizzo dell’immagine lo trovate nel parametro url; in questo caso è settato nella cartella images. Cambiatelo in base a dove inserirete l’immagine.

Il checkbox invece è nascosto, come vedete dal parametro style con valore display:none (non mostrare). In questo caso è selezionato (checked=”checked”); se lo volete deselezionato in caricamento di pagina basterà eliminare quest’ultimo codice. Potete cambiare il parametro name, così da poterlo recuperare con il nome che volete una volta inviato il form, mentre dovrete lasciare intatto l’id, poiché jQuery riconosce il checkbox grazie a quello.

Per chi dovesse capirne un pò di più di jQuery e volesse aggiungere più checkbox in una sola pagina, basterà modificare l’id del div e del checkbox e aggiungere un codice jQuery, il primo postato, per ogni checkbox aggiunto, modificando i valori #checkbox e #ckios con i rispettivi nomi del campo checkbox e del div.

Ultimo appunto: ricordatevi di aggiungere la libreria jQuery! A volte monto codici a non finire e quando non funziona passo decine di minuti a capire il problema, ricordandomi poi di non avere aggiunto la libreria!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>

Se vi piace commentate, solo per sapere che esiste qualcuno.. ho decine di visite al giorno ma nessuno che scrive o ringrazia 😦

Saluti 🙂

Annunci
  1. #1 di giacinto il 26/11/2012 - 12:32

    Ottima dritta. L’escamotage è molto funzionale e semplice. Grazie per il supporto. Visto che mi sto dilettando per WebApp su iPhone ho un problema davvero bizzaro con PHP e sessioni unitamente ad una applicazione che gira su iPhone.

    Per non dilungarmi troppo ti lascio la mia mail e se sei interessato a darmi eventualmente una mano e a scambiarci competenze di programmazione ti spiegherò nel dettaglio la stranezza che mi succede, peraltro non sono riuscito a trovare in rete ancora una soluzione:

    giacintogaveglia@gmail.com

    • #2 di portapipe il 26/11/2012 - 14:48

      Sono contento ti sia servito 🙂
      Se vuoi un supporto ti invito a scriverlo sul mio forum così che possa darti una mano in prima persona e riceverlo anche da terzi o, cosa che spero, che possa aiutare qualcuno in futuro come questo articolo ha aiutato te 😉

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: