仿 office 2003 的工具条---工具,工具-为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 my小屋

联系我们
设为首页
加入收藏

qq,asp,php,jsp,xml,sql,.net,编程程序网页图象建站经验私服




	当前位置：首页>>网页设计>>html/css>>正文	新版上线！[旧版]

注:打开慢时请稍等

仿 office 2003 的工具条

http://www.iyit.net 日期：2006-5-27 9:23:07 来源：转载点击：

【参加讨论】仿 office 2003 的工具条:

工作之余做了这个小东西
仿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的<a href=http://www.iyit.net/html/yyrj/gjrj/index.html target=_blank>工具</a>条</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="http://www.iyit.net/files/beyondpic/2006-5/27/0652709230721388.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的<a href=http://www.iyit.net/html/yyrj/gjrj/index.html target=_blank>工具</a>条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用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>

如果您需要参与讨论，请参见这里。

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：跟我学xsl（一）
下一篇：showmodelessdialog()使用详解
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

　相关文章

photoshop路径工具勾图、去底的方法技巧	photoshop渐变工具的巧用	fireworks mx 2004 选区工具
fireworks mx 2004 图像修改工具	fireworks mx 2004 色彩填充工具	fireworks mx 2004 橡皮图章工具系列
fireworks mx 2004 路径工具	fireworks mx 2004 路径修改工具	fireworks mx 2004 形状工具
fireworks mx2004之shapes工具组应用实	fireworks mx增强的位图工具	fw mx 2004教程(2)：绘图工具
fireworks钢笔工具基本使用方法	神奇的图章工具	fireworks mx 2004 自由笔刷工具
coreldraw 艺术媒体等工具	coreldraw 交互式填充工具	浅尝 coreldraw10:shape工具
coreldraw 11 预设形状工具探秘	coreldraw 标注工具使用	illustrator图形组合工具图解（1）
illustrator图形组合工具图解（2）	illustrator 10 文本工具详解（1）	illustrator 10 文本工具详解（2）