Create a Digg login style using jQuery and CSS

Create a Digg login style using jQuery and CSS

Di Patrick // 27, gennaio 2010 // Pubblicato in CSS, jQuery/AJAX // Letto 1112 Commenta

Nella rete siamo ormai abbituati ad eseguire il nostro accesso ad un sito attraverso una Modal Window, ovvero l’equivalente di una PopUp vecchio stile; il loro stile è molto cambiato e soprattutto è migliorata l’usabilità del loro servizio.
Con questa premessa ho introdotto il fine del mio nuovo Tutorial dedicato al mondo jQuery e CSS, con i quali oggi realizzeremo la Modal Window di Login del famigerato Digg.com

Iniziamo con lo scaricare il Tutorial dal mio sito www.beatfly.com/download.php

All’interno del pacchetto .ZIP troviamo tutto il materiale per realizzare lo script e l’esempio funzionante. Analizzando il file partiamo dalla costruzione XHTML della pagina che prevede un div contenitore con id #login contenente il Form di autenticazione. Nel tutorial vedrete un semplice pulsante link che aprirà la nostra form come nel caso del sito Digg. Molto spesso viene demandata al CSS la regola di nascondere un elemento impostando lo stesso su display=none; personalmente ritengo errata questa metodologia poichè poco accessibile; dunque, poichè stiamo utilizzando uno script js perchè non utilizzare lo stesso per nascondere questo elemento? Se infatti l’utente avesse js disabilitato, comunque potrebbe fruire del Form e la funzionalità della Login sarebbe salvaguardata.

Vediamo dunque lo script jQuery al quale demandiamo le funzionalità di apertura e chiusura della Form di Login:

1
2
3
4
5
6
7
8
9
10
11
12

//Set the loginPanel close by default
$('#login').hide();

$('a#loginPanel').click(function () {
$('#login').fadeIn('slow');
returnfalse;
});

$('#closePanel').click(function () {
$('#login').fadeOut();
returnfalse;
});

Come potete vedere lo script setta su Hide il div contenitore; a questo punto aggiungiamo due funzioni di tipo click ai due link a#loginPanel e ad a#closePanel; entrambi sono seguiti da returnfalse; al fine di indicare al Browser di non seguire i stessi link nel caso di problemi.

Lo stile della Modal window è semplicemente modificabile ed inoltre senza l’ausilio di immagini di sfondo abbiamo ricreato l’effetto trasparenza proprio del sito Digg; ho utilizzato per l’occasione alcune regole CSS proprie della versione 3 al fine di migliorare l’aspetto e diminuire il mantenimento o cambiamento della grafica; sono presenti gli angoli arrotondati e la proprietà RGBA che introduce oltre che il colore anche la funzione alpha; purtoppo IE ancora non supporta questa funzione, ma potrete aggiungere la classica definizione background-color per questo Browser nel caso vogliate sostenerlo.

Buon lavoro. Scarica il Tutorial

Salva e condividi questo Articolo

About Patrick

Patrizio Quatrini aka Patrick è il fondatore e unico titolare dello studio Beat Fly Multimedia Lab nato con lo scopo di riunire menti creative provenienti da vari ambiti artistici. Oggi lavora come Visual Designer e programmatore Web.