Faking an AJAX-y login box
I've been asked to prototype a login box for a project, with the goal of emulating how an AJAX-y login box would.
Idea is:
- User types in username/password (any; again, this isn't hooked up to any DBs or anything yet) and hits enter
- Throbber shows up for 3 seconds.
- User info appears.
I've tried doing this with jQuery as per the below; anyone have an idea what I'm doing wrong? Many thanks!
<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: <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>
The delay() only affects the queue for #throbber (and 300 is 0.3 second).
Instead, use the callback of .hide() to show #logged-in after #throbber has been hidden:
jQuery('#login-form').submit(function() {
jQuery('#login-form > *').hide();
jQuery('#throbber').show().delay(3000).hide(function() {
jQuery('#logged-in').show();
});
return false;
});
(demo)
You need to change delay to 3000, make the whole login-form hide rather than just the child elements, and this part is key... put the logged in showing code inside a callback function to be executed after the throbber is hidden... like this:
jQuery('#login-form').submit(function(){
jQuery('#login-form').hide();
jQuery('#throbber').show().delay(3000).hide(function(){
jQuery('#logged-in').show();
});
return false;
});
Try this: 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;
});
});
Here is a demo
http://jsfiddle.net/6UwDn/2/
加载中,请稍侯......
精彩评论