- 4 Giugno 2011
- 105
- 0
- Miglior risposta
- 0
Ciao a tutti ragazzi, avete presente quando andate in un sito e trovate in alto una linguetta che mostra o nasconde un form di login (o altro)? Per chi non è capace di farlo segua questa guida.
Requisiti
- Conoscenza base HTML
- Una libreria jQuery
- Conoscenza base CSS
- Conoscenza base Javascript e jQuery
Strumenti
- Un editor di testo TextEdit (per Mac, salvate in .html), Blocco note (per Windows, salvate in .html). No WORD!
- Un po' di pazienza…
Procediamo!
Per prima cosa dobbiamo crearci una pagina HTML che richiami la libreria jQuery. Per comodità useremo quelle di Google Ajax, che hanno anche il vantaggio di essere in CDN (per chi non sa cosa sono si legga questa pagina di Wikipedia
Come avrete notato ho inserito anche il tag <style></style> perché lo useremo per dare lo stile al div.
Creiamo un div chiamato loginArea dove metteremo il nostro form per il login.
Aggiungiamo anche un tag <a></a> con l'attributo href che punta al nulla (quindi #) e l'attributo class chiamato loginLink e scriviamoci tra il tag di apertura e di chiusura "Login".
Dentro al div loginArea facciamo un form che ha come action la pagina login.php (per processare la richiesta) e come l'attributo method (che è il metodo di trasmissione dei dati) lo impostiamo a post.
Inseriamo nel form 3 input, mettiamoli il nome che il form passerà alla pagina login.php e un value per dire all'utente che campo è:
- uno di tipo text
- uno di tipo password
- uno di tipo submit
Tra un input e l'altro mettiamo un <br /> per farlo andare a capo.
Adesso diamo lo stile al div e al link. Per il div non consiglio di usare come background il bianco. Centrate il tutto e mettete il link di apertura a destra.
Consiglio di inserire anche un reset css per azzerare le differenze dei browser. Io userò quello di Meyerweb
Il codice è un po' compresso perché è mia abitudine scriverlo così per ottimizzare il peso del file.
Non mi soffermo sul css perché sarebbe troppo lungo ed è un requisito per la guida, ma per aiutarvi l'ho commentato.
Ho dato un po' di stile al form che faceva schifo….
Adesso però passiamo alla programmazione vera e propria per far funzionare tutto.
Apriamo nel tag <head> un tag <script> per poterci scrivere il nostro codice javascript.
Mettiamo una funzione jQuery che fa eseguire il codice solo quando il DOM (per chi non sa cos'è Wikipedia:
Scriviamo una funzione click per il link di apertura/chiusura.
Selezioniamo con jQuery il div loginArea e lo manipoliamo con la funzione jQuery toggle() (da non confondere con toggleClass(): toggle() è un metodo di animazione, toggleClass() opera con le classi CSS!), imposto a slow l'animazione (potete sceglie tra fast, slow e un valore numerico espresso in millisecondi. 400 è di default).
Inserisco nella funzione ready il codice per nascondere (con la funzione jQuery hide()) il div.
Per non far comparire il cancelletto (#) nell'url bisogna scrivere tre righe di codice che annullano l'evento.
Per chi non volesse far comparire il link e il div a chi non ha Javascript attivo bisogna scrivere del css insieme al tag <noscript>
Spero di essere stato abbastanza completo nel scrivere la guida. Se avete dubbi non esitate a scrivere un commento.
EDIT:
Per chi invece volesse un'animazione più fluida bisogna sostituire nello script toggle() con slideToggle() . Le velocità di animazione vengono impostate come in toggle().
Requisiti
- Conoscenza base HTML
- Una libreria jQuery
- Conoscenza base CSS
- Conoscenza base Javascript e jQuery
Strumenti
- Un editor di testo TextEdit (per Mac, salvate in .html), Blocco note (per Windows, salvate in .html). No WORD!
- Un po' di pazienza…
Procediamo!
Per prima cosa dobbiamo crearci una pagina HTML che richiami la libreria jQuery. Per comodità useremo quelle di Google Ajax, che hanno anche il vantaggio di essere in CDN (per chi non sa cosa sono si legga questa pagina di Wikipedia
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
).
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Come avrete notato ho inserito anche il tag <style></style> perché lo useremo per dare lo stile al div.
Creiamo un div chiamato loginArea dove metteremo il nostro form per il login.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Aggiungiamo anche un tag <a></a> con l'attributo href che punta al nulla (quindi #) e l'attributo class chiamato loginLink e scriviamoci tra il tag di apertura e di chiusura "Login".
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Dentro al div loginArea facciamo un form che ha come action la pagina login.php (per processare la richiesta) e come l'attributo method (che è il metodo di trasmissione dei dati) lo impostiamo a post.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Inseriamo nel form 3 input, mettiamoli il nome che il form passerà alla pagina login.php e un value per dire all'utente che campo è:
- uno di tipo text
- uno di tipo password
- uno di tipo submit
Tra un input e l'altro mettiamo un <br /> per farlo andare a capo.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Adesso diamo lo stile al div e al link. Per il div non consiglio di usare come background il bianco. Centrate il tutto e mettete il link di apertura a destra.
Consiglio di inserire anche un reset css per azzerare le differenze dei browser. Io userò quello di Meyerweb
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Il codice è un po' compresso perché è mia abitudine scriverlo così per ottimizzare il peso del file.
Non mi soffermo sul css perché sarebbe troppo lungo ed è un requisito per la guida, ma per aiutarvi l'ho commentato.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ho dato un po' di stile al form che faceva schifo….
Adesso però passiamo alla programmazione vera e propria per far funzionare tutto.
Apriamo nel tag <head> un tag <script> per poterci scrivere il nostro codice javascript.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Mettiamo una funzione jQuery che fa eseguire il codice solo quando il DOM (per chi non sa cos'è Wikipedia:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
) è pronto per essere manipolato.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Scriviamo una funzione click per il link di apertura/chiusura.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Selezioniamo con jQuery il div loginArea e lo manipoliamo con la funzione jQuery toggle() (da non confondere con toggleClass(): toggle() è un metodo di animazione, toggleClass() opera con le classi CSS!), imposto a slow l'animazione (potete sceglie tra fast, slow e un valore numerico espresso in millisecondi. 400 è di default).
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Inserisco nella funzione ready il codice per nascondere (con la funzione jQuery hide()) il div.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per non far comparire il cancelletto (#) nell'url bisogna scrivere tre righe di codice che annullano l'evento.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per chi non volesse far comparire il link e il div a chi non ha Javascript attivo bisogna scrivere del css insieme al tag <noscript>
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Spero di essere stato abbastanza completo nel scrivere la guida. Se avete dubbi non esitate a scrivere un commento.
EDIT:
Per chi invece volesse un'animazione più fluida bisogna sostituire nello script toggle() con slideToggle() . Le velocità di animazione vengono impostate come in toggle().
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ultima modifica: