简单的登录按钮
来自HtmlDrive上的小例子
?
您可以访问这里查看演示：http://fdemo.sinaapp.com/
?
源自：http://www.htmldrive.net/items/show/1087/Cool-Dropdown-Login-Form-with-jQuery#
?
下面是其html:
?
<div id="loginContainer"><a id="loginButton" style="display: block;"> <form id="loginForm"><fieldset id="body"><fieldset><label for="email">Email Address</label><input type="text" id="email" name="email"></fieldset><fieldset><label for="password">Password</label><input type="password" id="password" name="password"></fieldset><input type="submit" value="Sign in" id="login"><label for="checkbox"><input type="checkbox" id="checkbox">Remember me</label></fieldset><span><a href="#">Forgot your password?</a></span></form></div></div>
现在你最好去看下演示效果：http://www.htmldrive.net/items/demo/1087/Cool-Dropdown-Login-Form-with-jQuery
?
贴出这段Html，目的有二：
? ? ?1. 学习它的布局；
? ? ?2. 学习一些jquery的应用。
?
=====================
查看表单loginBox div的position是使用绝对定位的，关于绝对定位请看下面的文章：
http://wujt.iteye.com/blog/1181558。
loginContainer 这个主div是为loginBox服务的，这就是为什么我用firebug查看布局时，loginContainer 根本就没有包含这个组件。
?
=====================
关于下面的js就不用多讲了，很简单
$(function() {var button = $('#loginButton');var box = $('#loginBox');var form = $('#loginForm');button.removeAttr('href');button.mouseup(function(login) {box.toggle();button.toggleClass('active');});form.mouseup(function() {return false;});$(this).mouseup(function(login) {if(!($(login.target).parent('#loginButton').length > 0)) {button.removeClass('active');box.hide();}});}); ??
?