工作之余做了这个小东西
仿office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用css和javascript做的
菜单就不做了，偷懒中
感兴趣的朋友可以和我联系，大家交流交流．运行代码框
<html><head><meta http-equiv="content-language" content="zh-cn"><meta http-equiv="content-type" content="text/html; charset=gb2312"><title>仿office 2003的工具条</title><script>/*----------舜子制作menu javascript made by puterjame-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=listnamethis.buttonname=buttonnamethis.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=lightcolorthis.normalcolor=normalcolorthis.icon=iconthis.title=titlethis.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="/files/bpic/2006-5/30/065302246113244.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=textvdiv = 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"><div id=listdiv style='border:1px #636563 solid;visibility: hidden;position: absolute;overflow:scroll;height:150'></div><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> <div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' style="cursor:default"> <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> </div></td> <td width="78" nowrap> <div id="listbox1" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist2,1,100)' style="cursor:default"> <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> </div></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><p><font size="2" color="#ffffff">工作之余做了这个小东西<br>仿office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用css和javascript做的<br>菜单就不做了，偷懒中<br><br>感兴趣的朋友可以和我联系，大家交流交流．</font></p><p><b><font size="2" color="#ffffff"><a href="mailto:puterjam@etang.com"><font color="#ffffff" face="arial">puterjam@etang.com</font></a></font></b></p></body></html>
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
