AJAX-yログインボックスの偽装

AJAX-yログインボックスのエミュレートを目的として、プロジェクトのログインボックスのプロトタイプを作成するように求められました。AJAX-yログインボックスの偽装

アイデアは次のとおりです。

ユーザーのユーザー名/パスワードの種類（どの;再び、これはまだのDBか何かにフックアップされていない）とヒットはスロバーが3秒間現れ
を入力してください。
ユーザー情報が表示されます。

これをjQueryで以下のように試してみました。誰かが私が間違っていることを考えている？どうもありがとう！

実行されるコールバック関数内のコードを示すにログインを置く...あなたがいうだけの子要素よりも、全体のログイン・フォームの非表示を行い、3000に遅延を変更する必要があり、この部分がキーである

<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プロトコルは、ローカルファイルを扱うときには明らかに動作しません（私はそうであったと思いますが...）。それにかかわらず、受け入れられたジェンスグラムの答えは、彼が私が欲しいものに最も近く、キリアンの後で二番目だったからです。 – aendrew

delay()は#throbber用のキューに影響を及ぼし（と300は0.3秒です）。代わりに

は、#throbberが隠された後#logged-inを表示する.hide()のコールバックを使用します。

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

スロバーはこのように...隠された後：

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

あなたの答えは素晴らしいですが、私はあなたのコードが私は欲しいと思った。また、文字通り "入力"キーを押しながら、私は質問をどのように表現したのですか、実際のsubmit（）;機能は私が最終的に達成しようとしていたものに近いものでした。関係なくお返事ありがとう！ – aendrew

それは代替として置かれていた問題はありません。私はそれを少し読みやすくなったが、あなたが選んだ答えはあなたのコードに近いです。乾杯。 – Kieran