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

Be Sociable, Share!

•