表单/表格

jQuery+css3登录注册表单切换动画特效

创客主机


这是一款简单的、非常实用的jQuery和css3登录注册表单切换动画特效。这个插件允许用户在登录、注册和忘记密码三个页面之间来回切换,切换时带有炫酷的css3动画效果。当浏览器不支持javascript时,三个页面只是做简单的跳转。

HTML代码

整个html结构是使用一个wrapper包住三个表单:登录表单、注册表单和忘记密码表单。

  1. <div id="form_wrapper" class="form_wrapper">
  2. <!-- We will add our forms here -->
  3. </div>
  4. <form class="register">
  5.   <h3>Register</h3>
  6.   <div class="column">
  7.     <div>
  8.       <label>First Name:</label>
  9.       <input type="text" />
  10.     </div>
  11.     <div>
  12.       <label>Last Name:</label>
  13.       <input type="text" />
  14.     </div>
  15.     <div>
  16.       <label>Website:</label>
  17.       <input type="text" value="http://"/>
  18.     </div>
  19.   </div>
  20.   <div class="column">
  21.     <div>
  22.       <label>Username:</label>
  23.       <input type="text"/>
  24.     </div>
  25.     <div>
  26.       <label>Email:</label>
  27.       <input type="text" />
  28.     </div>
  29.     <div>
  30.       <label>Password:</label>
  31.       <input type="password" />
  32.     </div>
  33.   </div>
  34.   <div class="bottom">
  35.     <div class="remember">
  36.       <input type="checkbox" />
  37.     </div>
  38.     <input type="submit" value="Register" />
  39.     <a href="index.html" rel="login" class="linkform">
  40.       You have an account already? Log in here
  41.     </a>
  42.     <div class="clear"></div>
  43.   </div>
  44. </form>
  45. <form class="login active">
  46.   <h3>Login</h3>
  47.   <div>
  48.     <label>Username:</label>
  49.     <input type="text" />
  50.   </div>
  51.   <div>
  52.     <label>Password: 
  53.       <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
  54.         Forgot your password?
  55.       </a>
  56.     </label>
  57.     <input type="password" />
  58.   </div>
  59.   <div class="bottom">
  60.     <div class="remember"><input type="checkbox" />
  61.       <span>Keep me logged in</span>
  62.     </div>
  63.     <input type="submit" value="Login"></input>
  64.     <a href="register.html" rel="register" class="linkform">
  65.       You don't have an account yet? Register here
  66.     </a>
  67.     <div class="clear"></div>
  68.   </div>
  69. </form>
  70. <form class="forgot_password">
  71.   <h3>Forgot Password</h3>
  72.   <div>
  73.     <label>Username or Email:</label>
  74.     <input type="text" />
  75.   </div>
  76.   <div class="bottom">
  77.     <input type="submit" value="Send reminder"></input>
  78.     <a href="index.html" rel="login" class="linkform">
  79.       Suddenly remebered? Log in here
  80.     </a>
  81.     <a href="register.html" rel="register" class="linkform">
  82.       You don't have an account? Register here
  83.     </a>
  84.     <div class="clear"></div>
  85.   </div>
  86. </form>

登录表单带有一个active class,表示页面打开时首先显示的是登录表单。

JAVASCRIPT

首先添加一些必须的变量参数。

  1. //the form wrapper (includes all forms)
  2. var $form_wrapper   = $('#form_wrapper'),
  3. //the current form is the one with class "active"
  4. $currentForm    = $form_wrapper.children('form.active'), 
  5. //the switch form links
  6. $linkform       = $form_wrapper.find('.linkform');

获取每个表单的高度和宽度用来做后面的动画。

  1. $form_wrapper.children('form').each(function(i){
  2.     var $theForm    = $(this);
  3.     //solve the inline display none problem when using fadeIn/fadeOut
  4.     if(!$theForm.hasClass('active'))
  5.         $theForm.hide();
  6.     $theForm.data({
  7.         width   : $theForm.width(),
  8.         height  : $theForm.height()
  9.     });
  10. });

接下来调用设置wrapper大小的函数,该函数将在下面给出:

  1. setWrapperWidth();

当用户点击了切换链接,我们将隐藏当前表单,显示用户点击的表单。这里需要动态改变表单的高度和宽度到新表单的高度和宽度。

  1. $linkform.bind('click',function(e){
  2.     var $link   = $(this);
  3.     var target  = $link.attr('rel');
  4.     $currentForm.fadeOut(400,function(){
  5.         //remove class "active" from current form
  6.         $currentForm.removeClass('active');
  7.         //new current form
  8.         $currentForm= $form_wrapper.children('form.'+target);
  9.         //animate the wrapper
  10.         $form_wrapper.stop()
  11.                      .animate({
  12.                         width   : $currentForm.data('width') + 'px',
  13.                         height  : $currentForm.data('height') + 'px'
  14.                      },500,function(){
  15.                         //new form gets class "active"
  16.                         $currentForm.addClass('active');
  17.                         //show the new form
  18.                         $currentForm.fadeIn(400);
  19.                      });
  20.     });
  21.     e.preventDefault();
  22. });

setWrapperWidth函数是通过设置css属性完成的。我们希望页面加载完毕wrapper就能获得正确的高度和宽度:

  1. function setWrapperWidth(){
  2.     $form_wrapper.css({
  3.         width   : $currentForm.data('width') + 'px',
  4.         height  : $currentForm.data('height') + 'px'
  5.     });
  6. }

在demo中我们禁用了submit按钮。实际应用中你需要检查哪个表单被提交并给该表单class active。

  1. $form_wrapper.find('input[type="submit"]')
  2.              .click(function(e){
  3.                 e.preventDefault();
  4.              });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!