简单的登录按钮

来自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" class="active"><span>Login</span><em></em></a>
	<div style="clear:both"></div>
	<div id="loginBox" 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();
		}
	});
});