Tweet [3]
O jQuery é agora parte integrate de qualquer site. Oferece muitas funcionalidades que não são possíveis sem o jQuery. Sistemas de rating, de comentários e formulários de login criados com jQuery acrescentam um visual com estilo a qualquer site. Espero que você goste do formulário de login. E obrigado por se interessar por este tutorial.
Demo Do Formulário De Registo E Login Animado Com jQuery [4]
Código para download no fim do tutorial.
Código JQuery
$(document).ready(function(){
$('a#login').click(function(){
var email_address = $('#email_address').val();
var password = $('#password').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email_address) || password == "")
{
alert('Enter valid input.');
return false;
}
showLoader('login');
$.post("login.php?email_address"+email_address+'&password='+password, {
}, function(response){
hideLoader('login');
});
});
$('a#signUp').click(function(){
var signup_email = $('#signup_email').val();
var signup_password = $('#signup_password').val();
var confirm_password = $('#confirm_password').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(signup_email) || signup_password == "" || confirm_password =='')
{
alert('Enter valid input. All fields are requied.');
return false;
}
if(confirm_password != signup_password)
{
alert('Password must be same.');
return false;
}
showLoader('signUp');
$.post("register.php?signup_email"+signup_email+'&signup_password='+signup_password+'&confirm_password='+confirm_password, {
}, function(response){
hideLoader('signUp');
});
});
$('a#register').click(function(){
$('#first').animate( {
width: '0px',
opacity: 1,
height: '0px'
},function(){$('#first').hide();} );
});
$('a#back').click(function(){
$('#first').animate( {
width: '360px',
opacity: 1,
height: '200px'
},function(){} );
});
jQuery(function($){
$("#email_address").Watermark("Email");
$("#password").Watermark("Passwrd");
});
jQuery(function($){
$("#email_address").Watermark("watermark","#369");
$("#password").Watermark("watermark","#EEEEEE");
});
function UseData(){
$.Watermark.HideAll();
$.Watermark.ShowAll();
}
});
//show loading bar
function showLoader(id){
$('#'+id).fadeOut(200);
$('#loader_'+id).html('Please wait...');
}
//hide loading bar
function hideLoader(id){
$('#loader_'+id).html('Successfull');
};
Código HTML
<div id="s4">
<div class="form" id="second">
<br clear="all" />
<div class="heading" style=" width:163px;">SignUp </div><a href="#" class="login" id="back">Login</a>
<br clear="all" />
<label style="padding-top:6px;">Email</label>
<input type="text" name="signup_email" id="signup_email" />
<br clear="all" />
<label>Password</label>
<input type="password" name="signup_password" id="signup_password" />
<br clear="all" />
<label>Confirm </label>
<input type="password" name="confirm_password" id="confirm_password" />
<br clear="all" /><br clear="all" />
<div class="bottom" id="loader_signUp"><a href="#" class="register" style="float:none" id="signUp">Register</a></div>
</div>
<div class="form" id="first">
<br clear="all" />
<div class="heading" style=" width:183px;">Login</div><a href="#" id="register" class="register">Register</a>
<br clear="all" /><br clear="all" />
<label>Email</label>
<input type="text" name="email_address" id="email_address" />
<br clear="all" />
<label>Password</label>
<input type="password" name="password" id="password" /><br />
<br clear="all" />
<div class="bottom" id="loader_login"><a href="#" id="login" style="float:none" class="login">Login</a></div>
</div>
</div>
Aqui está o CSS.
Código CSS
h2{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
font-family:"Courier New", Courier, monospace;}
.form{
height:200px; width:360px; border:solid #C7E69D 1px;
-moz-border-radius: 6px; position:absolute;
-webkit-border-radius: 6px;
background-color:#C7E69D;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
#demos{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
font-family:"Courier New", Courier, monospace; font-size:14px; width:100%}
#s4{margin: 0 auto; width:30%;}
.login{
display:block; width:100px; padding:5px; background:#FF3333;-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color:#FFFFFF;
background-color:#FF3333;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-decoration:none;
margin-left:35px;
float:left;
}
.register{
display:block; width:100px; padding:5px; background:#3093C2;-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color:#FFFFFF;
background-color:#3093C2;
float:left;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
margin-left:10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-decoration:none;
}
.heading{ text-align:left; font-size:22px; font-weight:bolder; padding-left:20px; float:left;color:#999999}
#signup_email{ margin-top:7px;}
input{ border:solid #D4D4D4 1px; width:215px;float:left margin:2px 0 2px 0px; padding:5px; background:#F8F8F8;-moz-border-radius: 6px;
-webkit-border-radius: 6px;}
label{ width:50px; float:left; padding-left:20px; padding-top:3px; text-align:left}
.bottom{ padding-left:30px;}
Download do código usado neste tutorial: Formulário De Registo E Login Animado Com jQuery [5]
Tweet [3]