设为首页收藏本站
切换到窄版

 找回密码
 注-册

QQ登录

只需一步，快速开始

胜利之日DoD社区:二战FPS射击游戏»广场 › 休闲泡泡茶 › 电脑技术综合 › 网页制作 › 仿Office 2003的工具条
返回列表 发新帖
查看: 1042|回复: 0

[特效] 仿Office 2003的工具条

[复制链接]
Leya 发表于 2008-3-31 11:22:16 | 显示全部楼层 |阅读模式
  1. <html>

  3. <head>
  4. <meta http-equiv="Content-Language" content="zh-cn">
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6. <title>仿Office 2003的工具条</title>
  7. <script>
  8. var listnum=0;
  9. var menu_height;
  10. var menu_width;
  11. var menu_left;
  12. var menu_top;
  13. var topMar = 1;
  14. var leftMar = -2;
  15. var space = 1;
  16. var isvisible;

  18. function listbox(listname,buttonname,valuename)
  19. {
  20. this.listname=listname
  21. this.buttonname=buttonname
  22. this.valuename=valuename
  23. }

  25. function listaction(obj,action,showlist,scroll,tw)
  26. {
  27. num=obj.id.charAt(obj.id.length-1)
  28. if (!scroll) {scroll=0}
  29. if (!tw) {tw=105}
  30. listbox=eval(lb[num].listname)
  31. listbutton=eval(lb[num].buttonname)
  32. listvalue=eval(lb[num].valuename)
  33. switch (action)
  34. {
  35.   case 0:
  36.   listbox.className="getlist";listbutton.className="listover"
  37.   break;
  38.   case 1:
  39.   if (listbox.gf=="0")
  40.   {listbox.className="lostlist";listbutton.className="menubar"}
  41.   break;
  42.   case 2:
  43. for (i=0;i<lb.length;i++)
  44. {
  45. if (num!=i.toString()){
  46. nlistbox=eval(lb[i].listname)
  47. nlistbutton=eval(lb[i].buttonname)
  48. nlistvalue=eval(lb[i].valuename)
  49. nlistbox.className="lostlist";nlistbutton.className="menubar"
  50. nlistbox.gf="0"
  51.   }
  52. }
  53.   ShowMenu(listbox,showlist,tw,scroll);listbox.className="getlist";listbox.gf="1"
  54.   listnum=num;
  55.   break;
  56.   }
  57. }

  59. function HideMenu()
  60. {
  61. var mX;
  62. var mY;
  63. var vDiv;
  64. var mDiv;
  65. if (isvisible == true)
  66. {
  67.   vDiv = document.all("listDiv");
  68.   mX = window.event.clientX + document.body.scrollLeft;
  69.   mY = window.event.clientY + document.body.scrollTop;
  70.   if ((mX < parseInt(vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) ||
  71.    (mY < parseInt(vDiv.style.top)-menu_height) || (mY > parseInt(vDiv.style.top)+vDiv.offsetHeight))  {
  72.    vDiv.style.visibility = "hidden";
  73.    isvisible = false;
  74.   }
  75. }

  77. if (isvisible==false)
  78. {
  79.   for (i=0;i<lb.length;i++)
  80. {
  81. listbox=eval(lb[i].listname)
  82. listbutton=eval(lb[i].buttonname)
  83. listvalue=eval(lb[i].valuename)
  84. listbox.className="lostlist";listbutton.className="menubar"
  85. listbox.gf="0"
  86. }
  87. }
  88. }

  90. function ShowMenu(obj,vMnuCode,tWidth,scroll) {
  91. vMnuCode = "<table id='submenu' cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style='width:"+tWidth +
  92.       ";border-collapse: collapse' class='listDiv'><tr height=23><td nowrap align=left>" +
  93.        vMnuCode + "</td></tr></table>";

  95. menu_height = obj.offsetHeight;
  96. menu_width = obj.offsetWidth;
  97. menu_left = obj.offsetLeft + leftMar+2;
  98. menu_top = obj.offsetTop + topMar + menu_height + space-3;
  99. vParent = obj.offsetParent;
  100. while (vParent.tagName.toUpperCase() != "BODY")
  101. {
  102.   menu_left += vParent.offsetLeft;
  103.   menu_top += vParent.offsetTop;
  104.   vParent = vParent.offsetParent;
  105. }

  107. listDiv.innerHTML = vMnuCode;
  108. listDiv.style.top = menu_top;
  109. listDiv.style.left = menu_left;

  111. if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}
  112. else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}
  113. listDiv.style.visibility = "visible";
  114. var cssopaction=submenu.filters[0].opacity
  115. submenu.filters[0].opacity=0;
  116.     submenu.filters[1].Apply();
  117.     submenu.filters[0].opacity=100;
  118.     submenu.filters[1].Play();


  121. isvisible = true;
  122. }

  124. function menuitem(lightcolor,normalcolor,icon,title,url)
  125. {
  126. this.lightcolor=lightcolor
  127. this.normalcolor=normalcolor
  128. this.icon=icon
  129. this.title=title
  130. this.url=url
  131. }

  133. function bulidmenu(arrayname)
  134. {
  135. var menuarray=eval(arrayname)
  136. menucontent='<table border="0" width="100%">'
  137. for (i=0;i<menuarray.length;i++)
  138. {
  139. if (menuarray[i].title!="_line")
  140. {
  141. if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}
  142. if (menuarray[i].icon.length==0)
  143. {
  144. content='<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class="'+css+'">'+menuarray[i].title+'</td></tr></table>'
  145. }
  146. else
  147. {
  148. 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>'
  149. }

  151. if (menuarray[i].url!="_disable"){
  152. 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>'
  153. }
  154. else
  155. {
  156. menucontent=menucontent+'<tr><td height=16 style="fitler:gray">'+content+'</td></tr>'
  157. }

  159. }
  160. else
  161. {
  162. menucontent=menucontent+'<tr><td height=4><img src="images/dock.gif" width="99%" height=1></td></tr>'
  163. }


  166. }
  167. menucontent=menucontent+"</table>"
  168. return menucontent
  169. }

  171. function HL_Menu(obj,state)
  172. {
  173. switch (state)
  174. {
  175. case 0:
  176. obj.className="menuover"
  177. break;
  178. case 1:
  179. obj.className="menuup"
  180. break;
  181. }
  182. }

  184. var lb=new Array()
  185. lb[0]=new listbox('listbox0','listbutton0','listvalue0')
  186. lb[1]=new listbox('listbox1','listbutton1','listvalue1')

  188. var list1=new Array()
  189. list1[0]=new menuitem("#B1CBE4","","","ListItem1","")
  190. list1[1]=new menuitem("#B1CBE4","","","ListItem2","")
  191. list1[2]=new menuitem("#B1CBE4","","","ListItem3","")
  192. list1[3]=new menuitem("#B1CBE4","","","ListItem4","")
  193. list1[4]=new menuitem("#B1CBE4","","","ListItem5","")
  194. list1[5]=new menuitem("#B1CBE4","","","ListItem6","")
  195. list1[6]=new menuitem("#B1CBE4","","","ListItem7","")
  196. list1[7]=new menuitem("#B1CBE4","","","ListItem8","")
  197. list1[8]=new menuitem("#B1CBE4","","","ListItem9","")
  198. list1[9]=new menuitem("#B1CBE4","","","ListItem10","")

  200. blist1=bulidmenu("list1")


  203. var list2=new Array()
  204. list2[0]=new menuitem("#B1CBE4","","","字体1","")
  205. list2[1]=new menuitem("#B1CBE4","","","字体2","")
  206. list2[2]=new menuitem("#B1CBE4","","","字体3","")
  207. list2[3]=new menuitem("#B1CBE4","","","字体4","")
  208. list2[4]=new menuitem("#B1CBE4","","","字体5","")
  209. list2[5]=new menuitem("#B1CBE4","","","字体6","")
  210. list2[6]=new menuitem("#B1CBE4","","","字体7","")
  211. list2[7]=new menuitem("#B1CBE4","","","字体8","")
  212. list2[8]=new menuitem("#B1CBE4","","","字体9","")
  213. list2[9]=new menuitem("#B1CBE4","","","字体10","")

  215. blist2=bulidmenu("list2")
  216. function Golist(text)
  217. {
  218. listvalue=eval(lb[listnum].valuename)
  219. listvalue.innerText=text
  220. vDiv = document.all("listDiv");
  221. vDiv.style.visibility = "hidden";
  222. isvisible = false;
  223. }
  224. </script>

  226. <style>
  227. .lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  228. .getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }

  230. .menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)}
  231. .bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)}
  232. .leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand }
  233. .getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default }
  234. .lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; }
  235. .menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;}
  236. .menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; }
  237. .lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  238. .getlist  { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }

  240. .listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B}
  241. .listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); }

  243. </style>
  244. </head>

  246. <body onclick="HideMenu()" style="margin:0px" bgcolor="999999">
  247. <div id=listDiv style='border:1px #636563 solid;VISIBILITY: hidden;POSITION: absolute;overflow:scroll;height:150'></div>
  248. <table border="0" width="100%" id="table27" class="bodybar" cellspacing="0" cellpadding="0">
  249. <tr>
  250.   <td>
  251. <table border="0" cellspacing="0" cellpadding="0" height="30">
  252. <tr>
  253.   <td><table border="0" cellspacing="0" cellpadding="0" height="22">
  254.    <tr>
  255.        <td width="5"></td>
  256.     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  257.     <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">文件(F)</td></tr></table>
  258.     </td>
  259.     <td width="5"></td>
  260.     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  261.     <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">编辑(E)</td></tr></table>
  262.     </td>
  263.    </tr>
  264.   </table></td>
  265. </tr>
  266. </table>
  267.   </td>
  268. </tr>
  269. <tr>
  270.   <td>
  271. <table border="1" width="100" id="table28" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7"  style="border-collapse: collapse">
  272. <tr>
  273.   <td class="menubar">
  274.    <table border="0" width="100%" id="table29" cellspacing="0" cellpadding="0">
  275.     <tr>
  276.        <td width="10" nowrap>
  277.      <table border="0" width="2" cellspacing="0" cellpadding="1" id="table30">
  278.    <tr>
  279.     <td><img style="border:1px inset" height=1 width=1></td>
  280.    </tr>
  281.    <tr>
  282.     <td><img style="border:1px inset" height=1 width=1></td>
  283.    </tr>
  284.    <tr>
  285.     <td><img style="border:1px inset" height=1 width=1></td>
  286.    </tr>
  287.    <tr>
  288.     <td><img style="border:1px inset" height=1 width=1></td>
  289.    </tr>
  290.    </table></td>
  291.      <td width="35" nowrap><font size="2">姓名</font></td>
  292.      <td width="130" nowrap>
  293.    <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>
  294.      <td width="35" nowrap><font size="2">密码</font></td>
  295.      <td width="124" nowrap>
  296.    <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>
  297.      <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
  298.      <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  299.     <table cellspacing="0" cellpadding="0" id="table31" width="25"><tr><td nowrap></td><td class="leftitem">
  300.      登陆</td></tr></table>
  301.     </td>
  302.      <td width="100%" nowrap>　</td>
  303.     </tr>
  304.    </table>
  305.   </td>
  306. </tr>
  307. </table>

  309.   </td>
  310. </tr>
  311. <tr>
  312.   <td>

  314. <table border="1" width="100" id="table32" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7"  style="border-collapse: collapse">
  315. <tr>
  316.   <td class="menubar">
  317.    <table border="0" width="100%" id="table33" cellspacing="0" cellpadding="0">
  318.     <tr>
  319.        <td width="10" nowrap>
  320.      <table border="0" width="2" cellspacing="0" cellpadding="1" id="table34">
  321.    <tr>
  322.     <td><img style="border:1px inset" height=1 width=1></td>
  323.    </tr>
  324.    <tr>
  325.     <td><img style="border:1px inset" height=1 width=1></td>
  326.    </tr>
  327.    <tr>
  328.     <td><img style="border:1px inset" height=1 width=1></td>
  329.    </tr>
  330.    <tr>
  331.     <td><img style="border:1px inset" height=1 width=1></td>
  332.    </tr>
  333.    </table></td>
  334.      <td width="78" nowrap>
  335.    <div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' style="cursor:default">
  336.    <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35">
  337. <tr>
  338.   <td valign=center style="text-indent:4px"><font size="2" face="Verdana">
  339.   <span id=listvalue0>
  340.     </span></font></td>
  341.   <td width=12 align="center" class="menubar" id="listbutton0">
  342. <table border="0" cellpadding="0" style="border-collapse: collapse" id="table36">
  343.   <tr height=1>
  344.    <td width="1" bgcolor="#000000"></td>
  345.    <td width="1" bgcolor="#000000"></td>
  346.    <td width="1" bgcolor="#000000"></td>
  347.    <td width="1" bgcolor="#000000"></td>
  348.    <td width="1" bgcolor="#000000"></td>
  349.   </tr>
  350.   <tr height=1>
  351.    <td></td>
  352.    <td bgcolor="#000000"></td>
  353.    <td bgcolor="#000000"></td>
  354.    <td bgcolor="#000000"></td>
  355.    <td></td>
  356.   </tr>
  357.   <tr height=1>
  358.    <td></td>
  359.    <td></td>
  360.    <td bgcolor="#000000"></td>
  361.    <td></td>
  362.    <td></td>
  363.   </tr>
  364. </table></td>
  365. </tr>
  366. </table>

  368.    </div></td>
  369.      <td width="78" nowrap>
  370.    <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">
  371.    <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37">
  372. <tr>
  373.   <td valign=center style="text-indent:4px"><font size="2" face="Verdana"><span id=listvalue1>
  374.     </span></font></td>
  375.   <td width=12 align="center" class="menubar" id="listbutton1">
  376. <table border="0" cellpadding="0" style="border-collapse: collapse" id="table38">
  377.   <tr height=1>
  378.    <td width="1" bgcolor="#000000"></td>
  379.    <td width="1" bgcolor="#000000"></td>
  380.    <td width="1" bgcolor="#000000"></td>
  381.    <td width="1" bgcolor="#000000"></td>
  382.    <td width="1" bgcolor="#000000"></td>
  383.   </tr>
  384.   <tr height=1>
  385.    <td></td>
  386.    <td bgcolor="#000000"></td>
  387.    <td bgcolor="#000000"></td>
  388.    <td bgcolor="#000000"></td>
  389.    <td></td>
  390.   </tr>
  391.   <tr height=1>
  392.    <td></td>
  393.    <td></td>
  394.    <td bgcolor="#000000"></td>
  395.    <td></td>
  396.    <td></td>
  397.   </tr>
  398. </table></td>
  399. </tr>
  400. </table>

  402.    </div></td>
  403.      <td width="4" nowrap>
  404.    　</td>
  405.      <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
  406.      <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  407.     <table cellspacing="0" cellpadding="0" id="table39" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  408.      <b>B</b></td></tr></table>
  409.     </td>
  410.          <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  411.     <table cellspacing="0" cellpadding="0" id="table40" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  412.      <i>
  413.      <b>I</b></i></td></tr></table>
  414.     </td>
  415.     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  416.     <table cellspacing="0" cellpadding="0" id="table41" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  417.      <u>
  418.      <b>U</b></u></td></tr></table>
  419.     </td>
  420.      <td width="100%" nowrap>　</td>
  421.     </tr>
  422.    </table>
  423.   </td>
  424. </tr>
  425. </table>
  426.   </td>
  427. </tr>
  428. </table>
  429. </body>
  430. </html>
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注-册

本版积分规则

Archiver|手机版|小黑屋|DoDVip ( 桂ICP备14000730号 )

GMT+8, 2025-5-2 13:39 , Processed in 0.069551 second(s), 20 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表