Ẩn hiện khung login

October 13th, 2008
Đi đến nhận xét Nhận xét Sửa

Thời gian đầu của website, mình đi lục lại những bài viết hay để chia sẽ há. Bạn nào biết rồi thì thông cảm, bạn nào chưa biết thì bây giờ biết :)

 

Trước tiên là xem cái demo nha.

Download code thì ở đây.

Sử dụng

Bước 1:

Bước 2:

Tạo HTML như sau: 
<!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" xml:lang="en" lang="en">
<head>
 <title>Show/hide Login and Signup Panel using Mootools 1.2</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
</head>
<body>
 <div id="login">
  <div class="loginContent">
   <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
   </form>
   <div class="left">
     <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
   <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
   <ul class="login">
     <li class="left">&nbsp;</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
   </ul>
  </div>
 
  <div class="clearfix"></div>
 
  <div id="content">
   <p>The content of your page!</p>
  </div>
  <div class="clearfix"></div>
 </div>
</body>
</html>

Bước 3:

Tạo CSS như sau: 

/* Login Panel */
#top {
 background: url(images/login_top.jpg) repeat-x 0 0;
 height: 38px;
 position: relative;
}
 
#top ul.login {
 display: block;
 position: relative;
 float: right;
 clear: right;
 height: 38px;
 width: auto;
 font-weight: bold;
 line-height: 38px;
 margin: 0;
 right: 150px;
 color: white;
 font-size: 80%;
 text-align: center;
 background: url(images/login_r.jpg) no-repeat right 0;
 padding-right: 45px;
}
 
#top ul.login li.left {
 background: url(images/login_l.jpg) no-repeat left 0;
 height: 38px;
 width: 45px;
 padding: 0;
 margin: 0;
 display: block;
 float: left;
}
 
#top ul.login li {
  text-align: left;
 padding: 0 6px;
 display: block;
 float: left;
 height: 38px;
 background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
 color: #33CCCC;
}
 
#top ul.login li a:hover {
 color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 height: 0;
}
 
#login a {
 text-decoration: none;
 color: #33CCCC;
}
 
#login a:hover {
 color: white;
}
 
#login .loginContent {
 width: 550px;
 height: 80px;
 margin: 0 auto;
 padding-top: 25px;
 text-align: left;
 font-size: 0.85em;
}
 
#login .loginContent .left {
 width: 120px;
 float: left;
 padding-left: 65px;
 font-size: 0.95em;
}
 
#login .loginContent .right {
 width: 290px;
 float: right;
 text-align: right;
 padding-right: 65px;
 font-size: 0.95em;
}
 
#login .loginContent form {
 margin: 0 0 10px 0;
 height: 26px;
}
 
#login .loginContent input.field {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
}
 
#login .loginContent input:focus.field {
 background: #545454;
}
 
#login .loginContent input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}
 
#login .loginContent input.button_login {
 width: 47px;
 height: 20px;
 cursor: pointer;
 border: none;
 background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
 display: block;
 position: absolute;
 right: 15px;
 top: 10px;
 width: 70px;
 font-size: 0.8em;
 text-align: left;
}
 
#login .loginClose a {
 display: block;
 width: 100%;
 height: 20px;
 background: url(images/button_close.jpg) no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}
 
#login .loginClose a:hover {
 background: url(images/button_close.jpg) no-repeat right -20px;
}

Bước 4:

Viết javascript nè 

<head>
[...]
 <!-- Mootools - the core -->
 <script src="js/mootools-1.2-core-yc.js" type="text/javascript"><!--mce:0--></script>
 <!--Toggle effect (show/hide login form) -->
 <script src="js/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script>
 <script src="js/fx.slide.js" type="text/javascript"><!--mce:2--></script>
 <!-- END Fx.Slide -->
</head>

window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
 
    //Hide login panel when you click the button close on the upper-right corner of the login panel
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut(); //Hide login panel
		e.stop();
	});
});
Rồi sau đó kiểm tra :) Cái script này thì mình chưa test nhưng mình nghĩ là cũng không phải phức tạp lắm.
Khi nào website mình mở rộng cho phép nhiều người dùng, biết đâu đây sẽ là một ứng cử viên ;-) Đương nhiên là sẽ phải viết lại ở jQuery và … 

minh.tran Javascript, Lập trình web, jQuery http://web-kreation.com/index.php/ajax-javascript/nice-login-and-signup-panel-using-mootools-12/


Ðược xem 10801 lần, 18 hôm nay

Bài viết liên quan

  1. Chưa có nhận xét.
  1. Chưa có trackbacks