js+css实现的仿office2003界面

效果图

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>仿Office2003的工具条</title> <script> /*---------- 舜子制作 Menu java-script Made by PuterJam E-mail:puterjam@etang.com -------------*/ var listnum=0; var menu_height; var menu_width; var menu_left; var menu_top; var topMar = 1; var leftMar = -2; var space = 1; var isvisible; function listbox（listname,buttonname,valuename） { this.listname=listname this.buttonname=buttonname this.valuename=valuename } function listaction（obj,action,showlist,scroll,tw） { num=obj.id.charAt（obj.id.length-1） if （！scroll） {scroll=0} if （！tw） {tw=105} listbox=eval（lb[num].listname） listbutton=eval（lb[num].buttonname） listvalue=eval（lb[num].valuename） switch （action） {case 0: listbox.className="getlist";listbutton.className="listover" break; case 1: if （listbox.gf=="0"）{listbox.className="lostlist";listbutton.className="menubar"} break; case 2: for （i=0;i<lb.length;i++） { if （num！=i.toString（））{ nlistbox=eval（lb[i].listname） nlistbutton=eval（lb[i].buttonname） nlistvalue=eval（lb[i].valuename） nlistbox.className="lostlist";nlistbutton.className="menubar" nlistbox.gf="0" } } ShowMenu（listbox,showlist,tw,scroll）;listbox.className="getlist";listbox.gf="1" listnum=num; break; } } function HideMenu（）{ var mX; var mY; var vDiv; var mDiv; if （isvisible == true） { vDiv = document.all（"listDiv"）; mX = window.event.clientX + document.body.scrollLeft; mY = window.event.clientY + document.body.scrollTop; if （（mX < parseInt（vDiv.style.left）） || （mX > parseInt（vDiv.style.left）+vDiv.offsetWidth） ||（mY < parseInt（vDiv.style.top）-menu_height） || （mY > parseInt（vDiv.style.top）+vDiv.offsetHeight）） { vDiv.style.visibility = "hidden"; isvisible = false; } } if （isvisible==false） { for （i=0;i<lb.length;i++） { listbox=eval（lb[i].listname） listbutton=eval（lb[i].buttonname） listvalue=eval（lb[i].valuename） listbox.className="lostlist";listbutton.className="menubar" listbox.gf="0" } } } function ShowMenu（obj,vMnuCode,tWidth,scroll） { vMnuCode = "<table id="submenu" cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style="width:"+tWidth + ";border-collapse: collapse" class="listDiv"><tr height=23><td nowrap align=left>" +vMnuCode + "</td></tr></table>"; menu_height = obj.offsetHeight; menu_width = obj.offsetWidth; menu_left = obj.offsetLeft + leftMar+2; menu_top = obj.offsetTop + topMar + menu_height + space-3; vParent = obj.offsetParent; while （vParent.tagName.toUpperCase（）！= "BODY"） { menu_left += vParent.offsetLeft; menu_top += vParent.offsetTop; vParent = vParent.offsetParent; } listDiv.innerHTML = vMnuCode; listDiv.style.top = menu_top; listDiv.style.left = menu_left; if （scroll==0） {listDiv.style.overflow="visible";listDiv.style.width=tWidth} else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18} listDiv.style.visibility = "visible"; var cssopaction=submenu.filters[0].opacity submenu.filters[0].opacity=0; submenu.filters[1].Apply（）; submenu.filters[0].opacity=100; submenu.filters[1].Play（）; isvisible = true; } function menuitem（lightcolor,normalcolor,icon,title,url） { this.lightcolor=lightcolor this.normalcolor=normalcolor this.icon=icon this.title=title this.url=url } function bulidmenu（arrayname） { var menuarray=eval（arrayname） menucontent="<table border="0" width="100%">" for （i=0;i<menuarray.length;i++） { if （menuarray[i].title！="_line"） { if （menuarray[i].url！="_disable"）{css="getitem"}else{css="lostitem"} if （menuarray[i].icon.length==0） { content="<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class=""+css+"">"+menuarray[i].title+"</td></tr></table>" } else { content="<table cellspacing="0" cellpadding="0"><tr><td width="20" nowrap><img src=""+menuarray[i].icon+""></td><td class=""+css+"">"+menuarray[i].title+"</td></tr></table>" } if （menuarray[i].url！="_disable"）{ menucontent=menucontent+"<tr><td height=16 style="cursor:default" onmouseover="style.backgroundColor=""+ menuarray[i].lightcolor+""" onmouseout="style.backgroundColor=""+ menuarray[i].normalcolor+""" onclick="Golist（""+menuarray[i].title+""）">"+content+"</td></tr>" } else { menucontent=menucontent+"<tr><td height=16 style="fitler:gray">"+content+"</td></tr>" } } else { menucontent=menucontent+"<tr><td height=4><img src="images/dock.gif" width="99%" height=1></td></tr>" } } menucontent=menucontent+"</table>" return menucontent } function HL_Menu（obj,state） { switch （state） { case 0: obj.className="menuover" break; case 1: obj.className="menuup" break; } } var lb=new Array（） lb[0]=new listbox（"listbox0","listbutton0","listvalue0"） lb[1]=new listbox（"listbox1","listbutton1","listvalue1"） var list1=new Array（） list1[0]=new menuitem（"#B1CBE4","","","ListItem1",""） list1[1]=new menuitem（"#B1CBE4","","","ListItem2",""） list1[2]=new menuitem（"#B1CBE4","","","ListItem3",""） list1[3]=new menuitem（"#B1CBE4","","","ListItem4",""） list1[4]=new menuitem（"#B1CBE4","","","ListItem5",""） list1[5]=new menuitem（"#B1CBE4","","","ListItem6",""） list1[6]=new menuitem（"#B1CBE4","","","ListItem7",""） list1[7]=new menuitem（"#B1CBE4","","","ListItem8",""） list1[8]=new menuitem（"#B1CBE4","","","ListItem9",""） list1[9]=new menuitem（"#B1CBE4","","","ListItem10",""） blist1=bulidmenu（"list1"） var list2=new Array（） list2[0]=new menuitem（"#B1CBE4","","","字体1",""） list2[1]=new menuitem（"#B1CBE4","","","字体2",""） list2[2]=new menuitem（"#B1CBE4","","","字体3",""） list2[3]=new menuitem（"#B1CBE4","","","字体4",""） list2[4]=new menuitem（"#B1CBE4","","","字体5",""） list2[5]=new menuitem（"#B1CBE4","","","字体6",""） list2[6]=new menuitem（"#B1CBE4","","","字体7",""） list2[7]=new menuitem（"#B1CBE4","","","字体8",""） list2[8]=new menuitem（"#B1CBE4","","","字体9",""） list2[9]=new menuitem（"#B1CBE4","","","字体10",""） blist2=bulidmenu（"list2"） function Golist（text） { listvalue=eval（lb[listnum].valuename） listvalue.innerText=text vDiv = document.all（"listDiv"）; vDiv.style.visibility = "hidden"; isvisible = false; }</script> <style> .lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; } .getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; } .menubar {filter:progid:DXImageTransform.Microsoft.Gradient（gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6）} .bodybar {filter:progid:DXImageTransform.Microsoft.Gradient（gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6）} .leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand } .getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default } .lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; } .menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;} .menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; } .lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; } .getlist { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; } .listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B} .listDiv { filter: alpha（opacity=90,finishopacity=0,style=0） blendtrans（duration=.3）; } </style> </head> <body onclick="HideMenu（）" style="margin:0px" bgcolor="999999"><table border="0" width="100%" id="table27" class="bodybar" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" height="30"> <tr> <td><table border="0" cellspacing="0" cellpadding="0" height="22"> <tr> <td width="5"></td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">文件（F）</td></tr></table> </td> <td width="5"></td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">编辑（E）</td></tr></table> </td> </tr> </table></td> </tr> </table> </td> </tr> <tr> <td> <table border="1" width="100" id="table28" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse"> <tr> <td class="menubar"> <table border="0" width="100%" id="table29" cellspacing="0" cellpadding="0"> <tr> <td width="10" nowrap> <table border="0" width="2" cellspacing="0" cellpadding="1" id="table30"> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> </table></td> <td width="35" nowrap><font size="2">姓名</font></td> <td width="130" nowrap> <input type="text" name="T5" size="18" class="lostfocus" gf="0" onmouseover="this.className="getfocus"" onmouseout="if （this.gf=="0"） this.className="lostfocus"" onblur="this.className="lostfocus";this.gf="0"" onfocus="this.className="getfocus";this.gf="1""></td> <td width="35" nowrap><font size="2">密码</font></td> <td width="124" nowrap> <input type="password" name="T6" size="18" class="lostfocus" gf="0" onmouseover="this.className="getfocus"" onmouseout="if （this.gf=="0"） this.className="lostfocus"" onblur="this.className="lostfocus";this.gf="0"" onfocus="this.className="getfocus";this.gf="1""></td> <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table cellspacing="0" cellpadding="0" id="table31" width="25"><tr><td nowrap></td><td class="leftitem"> 登陆</td></tr></table> </td> <td width="100%" nowrap> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table border="1" width="100" id="table32" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse"> <tr> <td class="menubar"> <table border="0" width="100%" id="table33" cellspacing="0" cellpadding="0"> <tr> <td width="10" nowrap> <table border="0" width="2" cellspacing="0" cellpadding="1" id="table34"> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> <tr> <td><img style="border:1px inset" height=1 width=1></td> </tr> </table></td> <td width="78" nowrap><table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35"> <tr> <td valign=center style="text-indent:4px"><font size="2" face="Verdana"> <span id=listvalue0> </span></font></td> <td width=12 align="center" class="menubar" id="listbutton0"> <table border="0" cellpadding="0" style="border-collapse: collapse" id="table36"> <tr height=1> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> </tr> <tr height=1> <td></td> <td bgcolor="#000000"></td> <td bgcolor="#000000"></td> <td bgcolor="#000000"></td> <td></td> </tr> <tr height=1> <td></td> <td></td> <td bgcolor="#000000"></td> <td></td> <td></td> </tr> </table></td> </tr> </table> </td> <td width="78" nowrap><table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37"> <tr> <td valign=center style="text-indent:4px"><font size="2" face="Verdana"><span id=listvalue1> </span></font></td> <td width=12 align="center" class="menubar" id="listbutton1"> <table border="0" cellpadding="0" style="border-collapse: collapse" id="table38"> <tr height=1> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#000000"></td> </tr> <tr height=1> <td></td> <td bgcolor="#000000"></td> <td bgcolor="#000000"></td> <td bgcolor="#000000"></td> <td></td> </tr> <tr height=1> <td></td> <td></td> <td bgcolor="#000000"></td> <td></td> <td></td> </tr> </table></td> </tr> </table> </td> <td width="4" nowrap> </td> <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table cellspacing="0" cellpadding="0" id="table39" width="16"><tr><td nowrap></td><td class="leftitem" align=center> <b>B</b></td></tr></table> </td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table cellspacing="0" cellpadding="0" id="table40" width="16"><tr><td nowrap></td><td class="leftitem" align=center> <i> <b>I</b></i></td></tr></table> </td> <td nowrap align="center" onmouseover="HL_Menu（this,0）" onmouseout="HL_Menu（this,1）" class="menuup"> <table cellspacing="0" cellpadding="0" id="table41" width="16"><tr><td nowrap></td><td class="leftitem" align=center> <u> <b>U</b></u></td></tr></table> </td> <td width="100%" nowrap> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <font size="2" color="#FFFFFF">工作之余做了这个小东西仿Office 2003的工具条,主要尝试不用任何图片（当然不可能把所有按扭都做出来）,所有的控件都是用Css和java-script做的菜单就不做了，偷懒中感兴趣的朋友可以和我联系，大家交流交流．</font><br/> <b><font size="2" color="#FFFFFF"> <font color="#FFFFFF" face="Arial">[email]PuterJam@etang.com[/email]</font></font></b> <br/> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]