伪造一个ajax登录框

Faking an AJAX-y login box

本文关键字：ajax 登录 一个 伪造      更新时间：2023-09-26

我曾被要求为一个项目设计一个登录框原型，目标是模拟AJAX-y登录框。

的想法是:

  1. 用户名/密码中的用户类型(any;再次强调，这还没有连接到任何db或任何东西)，然后按回车
  2. Throbber出现3秒。
  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>

delay()只影响#throbber的队列(300为0.3秒)。

相反，使用.hide()的回调来显示#logged-in 在 #throbber被隐藏之后:

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

您需要将delay更改为3000，使整个login-form隐藏而不仅仅是子元素，这部分是关键…将登录的显示代码放入一个回调函数中，在throbber隐藏后执行…这样的:

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

试试: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;
            });
        });

这是一个演示

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

相关文章：