Questo breve tutorial mostrerà come applicare delle etichette o valori di default a dei campi di moduli (form) che sfumeranno con effetto fade al click dell’utente. Guardate la demo per vedere il codice in azione.
Questo è il codice che imposterà delle etichette di base in dei campi di un modulo form, in questo esempio un campo denominato username ed uno password e che ne imposterà l’effetto fade relativo su di essi.
Il codice HTML
|
1 2 3 4 5 6 |
<form> <label class="username-label" for="username">Username</label> <input name="username" class="username" type="text"> <label class="password-label" for="password">Password</label> <input name="password" class="password" type="password"> </form> |
Il codice CSS
|
1 2 3 4 |
.username-label, .password-label { position: absolute; margin: 9px 9px 9px 12px; } |
Il codice Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$('.username-label, .password-label').animate({ opacity: "0.4" }) .click(function() { var thisFor = $(this).attr('for'); $('.'+thisFor).focus(); }); $('.username').focus(function() { $('.username-label').animate({ opacity: "0" }, "fast"); if($(this).val() == "username") $(this).val() == ""; }).blur(function() { if($(this).val() == "") { $(this).val() == "username"; $('.username-label').animate({ opacity: "0.4" }, "fast"); } }); $('.password').focus(function() { $('.password-label').animate({ opacity: "0" }, "fast"); if($(this).val() == "password") { $(this).val() == ""; } }).blur(function() { if($(this).val() == "") { $(this).val() == "password"; $('.password-label').animate({ opacity: "0.4" }, "fast"); } }); |
Sia nella demo che nel file da scaricare troverete oltre all’effetto fade sopra esposto anche un effetto sliding alternativo da applicare eventualmente alle etichette dei campi form. Buon lavoro!
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
