jQuery Twitter-style sign in form
I'm trying to build a sign-in form similar to Twitter, but I have one problem. When "Sign In" is clicked, the form appears. And when "Sign In" is clicked again, t开发者_运维百科he form goes away. This fine, but I would like the form to go away also when the user clicks outside the form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Testing</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('.signIn').click(function() {
$(this).toggleClass('highlight');
$('form').toggleClass('show');
});
});
</script>
<style type="text/css">
#container {
margin: 0 auto;
width: 920px;
border: #ccc solid 1px;
padding: 20px;
overflow: auto;
background: #ebebeb;
}
.signIn {
float: right;
padding: 5px 5px 0;
}
form {
background: #0000ff;
padding: 10px;
width: 200px;
float: right;
clear: both;
position: absolute;
margin-left: 700px;
margin-top: 25px;
display: none;
}
label, input {
display: block;
}
.highlight {
background: #0000ff;
color: #fff;
}
.show {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div class="right">
<a href="#" class="signIn">Sign In</a>
<form>
<label>Username</label>
<input type="text" />
<label>Password</label>
<input type="text" />
</form>
</div>
</div>
</body>
</html>
You could add a completely (or partially) transparent div above everything on the page, then display the sign-in form above that. Add a handler to the overlay. When it is clicked, push it all away.
When jQuery('.signIn') is clicked, you should be firing your "show this class" code to the focus event. To hide the div, fire separate code to "hide this class" on the blur event.
Sample:
$('.signIn').focus(function() {
//Your "show this class" code here
});
$('.signIn').blur(function() {
//Your "hide this class" code here
});
Also, this is an aside, but when creating elements such as divs, you should attempt to give them ID's if they will be unique and will need to be uniquely selected, and should apply a class to two or more elements that will share commonalities between them (such as styling or behaviors on certain events). Your login form will most likely need it's own ID, as I don't suppose you'll have multiple login boxes. It may also need a class, if you have at least one other link that will be styled like it, but for the time being (according to your example) that's not needed.
So, as suggestion:
<div class="right">
<a href="#" id="signIn">Sign In</a>
<form>
<label>Username</label>
<input type="text" />
<label>Password</label>
<input type="text" />
</form>
</div>
Which would allow you to directly access that anchor element by using the id selector (#): $('#signIn'). When your pages are more complicated, there are some great performance benefits to using IDs instead of classes, as well as less complexity.
加载中,请稍侯......
精彩评论