JavaScript  »  Articoli  »  Effetti e controlli Javascript 

La personalizzazione grafica degli elementi dei form con Javascript (ma anche con i CSS...) è da sempre oggetto di discussione. Più che mai oggi, con l'abbondanza di soluzioni rese possibili dai tanti framework per effetti spuntati negli ultimi due anni.

Rispetto all'usabilità e all'accessibilità, la preoccupazione maggiore è relativa alla resa e al funzionamento degli elementi sottoposti al maquillage grafico in condizioni particolari, a partire da quei browser che non abbiano il supporto a Javascript o che lo abbiano disabilitato. Mai, quindi, si dovrebbe scegliere tra quelle disponibili e rintracciate in rete una soluzione che non sia ispirata al principio della graceful degradation o che non si basi sui dettami del cosiddetto Javascript non intrusivo. Detto altrimenti: se senza Javascript il form perde il suo accattivante aspetto grafico, ma funziona ugualmente assumendo il suo aspetto normale, di default, va bene, altrimenti meglio lasciar perdere. Per altre considerazioni in merito vi rimando a questo post di Alessandro Fulciniti uscito tempo fa su Edit e ai relativi commenti.

In questo articolo segnaleremo delle soluzioni relative alla personalizzazione grafica di checkbox (e in parte di radiobutton), elementi che a differenza di altri come i campi di testo poco si prestano alla modifica dell'aspetto via CSS (cosa che spiega l'abbondanza di script che li riguardano). Ne approfitteremo per cercare di fornire anche delle linee guida basilari che possano servire nella scelta di questa o quella soluzione.

Partiamo con uno script basato su jQuery: jQuery Checkbox. Ecco il primo esempio. Come si vede, il classico checkbox è stato sostituito da due piccoli asterischi, grigio per lo stato unchecked, giallo per checked (trovate le due immagini insieme a tutti gli esempi nel pacchetto zip allegato all'articolo).

L'uso del plugin è di una semplicità disarmante, anche perché non è richiesto, nella configurazione di base, l'utilizzo di CSS. Il codice parla da sé. Nella sezione head andiamo a richiamare i due script fondamentali:

Una semplice istruzione Javascript serve a inizializzare l'effetto (va nel body della pagina):

Non bisogna fare altro che specificare l'URL delle due immagini da usare, rispettivamente, per lo stato checked e per lo stato unchecked dei checkbox. Nel nostro caso, tramite l'uso dei selettori di jQuery, l'effetto è applicato a tutti i checkbox che si trovano all'interno del form con id="checkbox", indicato nella funzione con #checkbox. Questa la parte HTML:

Altri articoli

Altre guide

Altre newsletter