General Software Technology: Outlook style navigation bar

<head><br /><title>QQ菜单</title><br /><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><br /><script language='JavaScript'><br />var headHeight = 22;var bodyHeight = 202;var objcount = 6;var step = 10;var moving = false;<br />function showme(obj1, obj2)<br />{<br /> if (moving)<br />  return;<br /> moving = true;<br /> for(i=0;i<document.all.tags('td').length;i++)<br />  if (document.all.tags('td')[i].className.indexOf('headtd') == 0)<br />   document.all.tags('td')[i].className = 'headtd1';<br /> obj2.className = 'headtd2';<br /> moveme(obj1);<br />}<br />function moveme(obj)<br />{<br /> idnumber = parseInt(obj.id.substr(4));<br /> objtop = headHeight * (idnumber - 1);<br /> objbuttom = bodyHeight + headHeight * (idnumber - 2);<br /> currenttop = parseInt(obj.style.top);<br /> if (currenttop >= objbuttom)<br /> {<br />  countid = 1;<br />  for(i=0;i<document.all.tags('div').length;i++)<br />   if (document.all.tags('div')[i].id == 'item'+countid+'body')<br />   {<br />    obj = document.all.tags('div')[i];<br />    objtop = headHeight * (countid - 1);<br />    if (countid == idnumber)<br />    {<br />     moveup(obj,objtop,false);<br />     break;<br />    }<br />    else<br />     moveup(obj,objtop,true);<br />    countid++;<br />   }<br /> }<br /> else if ((currenttop >= objtop) && (idnumber < objcount))<br /> {<br />  idnumber++;<br />  countid = objcount;<br />  for(i=document.all.tags('div').length-1;i>=0;i--)<br />   if (document.all.tags('div')[i].id == 'item'+countid+'body')<br />   {<br />    obj = document.all.tags('div')[i];<br />    objbuttom = bodyHeight + headHeight * (countid - 2);<br />    if (countid == idnumber)<br />    {<br />     movedown(obj,objbuttom,false);<br />     break;<br />    }<br />    else<br />     movedown(obj,objbuttom,true);<br />    countid--;<br />   }<br /> }<br />}<br />function moveup(obj,objtop,ismove)<br />{<br /> currenttop = parseInt(obj.style.top);<br /> if (currenttop > objtop)<br /> {<br />  obj.style.top = currenttop - step;<br />  setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)<br />  return;<br /> }<br /> moving = ismove;<br />}<br />function movedown(obj,objbuttom,ismove)<br />{<br /> currenttop = parseInt(obj.style.top);<br /> if (currenttop < objbuttom)<br /> {<br />  obj.style.top = currenttop + step;<br />  setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)<br />  return;<br /> }<br /> moving = ismove;<br />}<br /></script><br /><br /><style type='text/css'><br />.headtd1 {  background: #00A4E1; border: 1px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}.headtd2 {  background: #20C1FF; border: 1px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.bodytd  {  background: #99CCFF; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}<br /></style><br /></head><br /><br /><div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:312px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; z-index:2; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; z-index:3; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; z-index:4; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; z-index:5; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item5body' style='position:absolute; left:0; top:268; width:120px; height:202px; z-index:6; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'>菜单5</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item6body' style='position:absolute; left:0; top:290; width:120px; height:202px; z-index:7; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item6head' height='20' class='headtd1' onclick='showme(item6body,this)' align='center'>菜单6</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div></div></body></html>

General Software Technology

Monday 15 October 2007

Outlook style navigation bar

No comments:

Blog Archive

About Me