僞造AJAX-y登錄框

我被要求爲一個項目創建一個登錄框的原型，其目的是模擬AJAX-y登錄框的方式。僞造AJAX-y登錄框

思路是：

在用戶名/密碼，用戶類型（任;再次，這是不掛接到任何數據塊或任何東西），並點擊進入
活動指示器顯示了3秒。
顯示用戶信息。

我試着用jQuery來做這件事，任何人有一個想法我做錯了什麼？非常感謝！

<html> 
    <head> 
     <link href="c/main.css" media="screen" rel="stylesheet" type="text/css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
     <!--[if lte ie7]> 
     #header #logo {margin-right: 100px;} 
     <!-[endif]--> 
       <script type="text/javascript"> 
      jQuery(document).ready(function(){ 
       jQuery('#login-form').submit(function(){ 
        jQuery('#login-form > *').hide(); 
        jQuery('#throbber').show().delay(300).hide(); 
        jQuery('#logged-in').show(); 
        return false; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="utilities"><a href="">Volunteer</a><a href="">About Us</a><input type="text" /></div> 
      <div id="header"> 
       <img src="i/logo.png" id="logo" /> 
       <div id="pnav-wrapper"> 
        <ul id="pnav"> 
         <li><a href="#">Upgrade Your<br /><span>Skills</span></a></li> 
         <li><a href="#">Browse<br /><span>Events</span></a></li> 
         <li><a href="#">Browse<br /><span>Jobs</span></a></li> 
        </ul> 
        <div id="login"> 
         <form action="#" method="get" id="login-form"> 
         Username: <input id="username" type="text" /><br /> 
         Password:&nbsp; <input id="password" type="password" /> 
         <input type="submit" style="visibility: hidden;"> 
         </form> 
         <img src="i/throbber.gif" style="display: none;" id="throbber"> 
         <p id="logged-in" style="display: none;"><strong>The Admin</strong><br /> 
         Administrator 
         </p> 
        </div> 
       </div> 
      </div> 
      <div id="content"></div> 
     </div> 
    </body> 
</html>

來源

2011-07-06 aendrew

哇，你們都是完全搖滾，但你們都錯了 - 問題在於第4行的jQuery聲明; http/s-less協議在處理本地文件時並不明顯（比如我可能應該提到那個......）。無論如何，接受的jensgram回答是因爲他最接近我想要的，而且是基蘭之後的第二位。 – aendrew

的delay()只會影響#throbber隊列（和300爲0.3秒）。

相反，使用的.hide()回調#throbber已被隱藏後，顯示#logged-in：

jQuery('#login-form').submit(function() { jQuery('#login-form > *').hide(); jQuery('#throbber').show().delay(3000).hide(function() { jQuery('#logged-in').show(); }); return false; });

（demo）

來源

2011-07-06 06:35:53 jensgram

男人！ 23秒:( – jensgram

接受，因爲它是準確和非常完整的，加上你是第二個。非常感謝！ – aendrew

@aendrew不客氣。快樂黑客:) – jensgram

您需要更改延遲至3000，使整個登錄形式隱藏，而不僅僅是子元素，而這部分是關鍵...把登錄呈現出回調函數內的代碼被執行該活動指示器被隱藏後...這樣的：

jQuery('#login-form').submit(function(){ 
    jQuery('#login-form').hide(); 
    jQuery('#throbber').show().delay(3000).hide(function(){ 
     jQuery('#logged-in').show(); 
    }); 
    return false; 
});

來源

2011-07-06 06:35:30

試試這個：http://jsfiddle.net/dbhCe/

jQuery(document).ready(function(){ 
      jQuery('#login-form').submit(function(){ 
       jQuery('#login-form').hide(); 

       jQuery('#throbber').show(); 

       window.setTimeout(function() { 
        jQuery("#throbber").hide(); 
        jQuery('#logged-in').show(); 
       }, 3000); 
       return false; 
      }); 
     });

來源

2011-07-06 06:36:39

這裏是一個演示

http://jsfiddle.net/6UwDn/2/

來源

2011-07-06 06:52:14 Kieran

你的答案很好，但我與jensgram的答案，因爲你的代碼渲染在我想要的div外面跳動。另外，儘管按下「輸入」鍵是我如何解釋這個問題，但我感覺使用了實際的submit（）;功能更接近我最終試圖完成的任務。不管謝謝你回答！ – aendrew

沒有任何問題，它被作爲替代品..我發現它更容易閱讀我的，但你選擇的答案更接近你的代碼。乾杯。 – Kieran