Form con etichette scorrevoli

Ancora una richiesta d’aiuto sul forum (precisamente quella relativa a Problema form animato fatta da albela) alla base di questo nostro secondo tutorial.

La richiesta era quella relativa alla realizzazione di etichette scorrevoli all’interno di un form con in più la presenza di tasti di reset per i valori inseriti nei campi di testo.
Abbiamo quindi creato un form inserendo campi testuali, etichette e l’elemento di reset in una lista ordinata, ottenendo il seguente codice HTML:

A questo punto dobbiamo posizionare le etichette sopra i campi input per spostarle successivamente, tramite jQuery, verso destra.
Per fare questo abbiamo creato il codice CSS impostando i singoli elementi ( li ) della lista in position relative, le etichette ( label ) in position absolute, z-index negativo (in maniera che siano posizionate sotto gli input) posizionandole 7 pixel a sinistra e, per finire, l’elemento di reset ( div ) in position relative. Questo il codice CSS finale:

Andiamo ora a vedere e spiegare il codice Javascript che utilizzeremo.

Lo spostamento laterale delle etichette deve avvenire quando ci si posiziona sul campo testuale ( input ). Essendo presenti più campi testuali creiamo una funzione che, ciclando su di essi, vada a selezionare:

• il valore inserito nel campo input;
• l’etichetta associata ed il suo valore, quest’ultimo necessario a verificare che ne campo input non sia scritto lo stesso valore della label;
• l’elemento di reset associato;

ed andiamo a spostare a sinistra sia l’etichetta che l’elemento di reset di 175 pixel.

Per ogni input diverso da quello correntemente selezionato inoltre andiamo a verificare se  il valore inserito è diverso da vuoto e dal nome dell’etichetta.
In tal caso, rimuoviamo la classe ‘active’. In caso contrario, oltre a rimuovere la classe ‘active’, riporteremo gli elementi alla loro posizione iniziale.

Vediamo ora cosa fare quando si clicca sull’elemento di reset. Anche qui, essendoci più di un elemento, andiamo ad eseguire un ciclo sulla classe che non farà altro che azzerare il calore del campo input e riportare gli elementi alla loro posizione iniziale.

Bisognerà poi eseguire una sorta di inizializzazione che sistemi etichette ed elementi di reset alla loro posizione iniziale.

Il codice Javascript completo sarà quindi il seguente:

A questo punto non vi resta altro che guardare la

DEMO

Questo tutorial ti è servito? Sostieni jQuery Italia con una donazione!

Donazione:
10 EUR 10 EUR 15 EUR 20 EUR 25 EUR 50 EUR 100 EUR

Inseriscimi nel Supporters Wall

Mostra:
Nessuna informazione Donazione, utente e commento Solo utente e commento

Nome:

Email:

Sito:

Commenti:

Scrivi il tuo commento con 199 caratteri