Msc Final Project

Simulate AJAX using JS (js)

Log in interface

Above is my new log in interface. I use some opacity plus box shadow instead of border to form a transparent glass sense. So whatever the background image is, my log in box can more or less properly match. In terms of technology, this log in box is a drop-down layer and supported by JavaScript (Mouse click event). And the sign in and Register is like AJAX but actually it is fulfiled by JavaScript shown below.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
     #title h3{
        margin:0;
	padding:0;
	float:left;
	width:60px;
	background:#fbb4e2;
	margin-right:3px;
     }
     #title .test{background-color:#af7d9c;}
     .clearfloat{clear:both;height:0;font-size:1px;line-height:0;}
     #content div{
	margin-top:-16px;
	display:none;
	width:186px;
	height:100px;
	background:#af7d9c;
     }
     #content .ali{display:block;}
</style>
</head>
<body>
  <div id="title">
      <h3 class="test" onmouseover="show(0)">one</h3>
      <h3 onmouseover="show(1)">two</h3>
      <h3 onmouseover="show(2)">three</h3>
  </div>
  <div class="clearfloat"></div>
  <div id="content">
      <div class="ali">
	<ul>
	   <li>a</li>
	   <li>a</li>
           <li>a</li>
	</ul>
      </div>
      <div>
	<ul>
	   <li>b</li>
	   <li>b</li>
	   <li>b</li>
	</ul>
       </div>
       <div>
	 <ul>
	    <li>c</li>
	    <li>c</li>
	    <li>c</li>
	 </ul>
	</div>
  </div>
 <!-- js -->
<script type="text/javascript">
	var cardcat = document.getElementsByTagName("h3");
	var cdivs = document.getElementById("content").getElementsByTagName("div");
	function show(num){
		for(var i=0;i<cardcat.length;i++){
			if(i==num){
				cardcat[i].className="test";
				cdivs[i].style.display="block";
			}else {
				cardcat[i].className="";
				cdivs[i].style.display="none";
			}
				
		}
	}		
</script>	
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s