Formulário De Registo E Login Animado Com jQuery
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
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
não entendi como instalar esses códigos eu tenho que instalar os tres? ou so um um?
onde no código html do meu blog eu tenho que instalar o código?
consegui colocar esse widget nesse meu blog de testes ,mas olha como ficou  ;http://demolpmtemplate.blogspot.com/ queria saber se tem como eu colocar um link na minha navbar quando se clicasse abrisse um pop up com esse widget , e queria saber se tem como mudar esse fundo verde para um fundo preto.
e pq quando clico em registre e login o widget continua do mesmo jeito?
Micael, estudar um pouco de HTML/CSS e JavaScript é bom…
Muito bom, gostei muito… usei para testes em uma intranet que estou desenvolvendo aqui na minha empresa… ficou show…. !