仿 Office 2003 的工具条

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Language" content="zh-cn">
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>仿Office 2003的工具条</title>
  6. <script>
  7. /*----------
  8. 舜子制作
  9. Menu Javascript Made by PuterJam
  10. E-mail:puterjam@etang.com
  11. -------------*/
  12.  var listnum=0;
  13.  var menu_height;
  14.  var menu_width;
  15.  var menu_left;
  16.  var menu_top;
  17.  var topMar = 1;
  18.  var leftMar = -2;
  19.  var space = 1;
  20.  var isvisible;
  21. function listbox(listname,buttonname,valuename)
  22. {
  23. this.listname=listname
  24. this.buttonname=buttonname
  25. this.valuename=valuename
  26. }
  27. function listaction(obj,action,showlist,scroll,tw)
  28. {
  29. num=obj.id.charAt(obj.id.length-1)
  30. if (!scroll) {scroll=0}
  31. if (!tw) {tw=105}
  32. listbox=eval(lb[num].listname)
  33. listbutton=eval(lb[num].buttonname)
  34. listvalue=eval(lb[num].valuename)
  35. switch (action)
  36.  { 
  37.   case 0:
  38.   listbox.className="getlist";listbutton.className="listover"
  39.   break;
  40.   case 1:
  41.   if (listbox.gf=="0") 
  42.   {listbox.className="lostlist";listbutton.className="menubar"}
  43.   break;
  44.   case 2:
  45.  for (i=0;i<lb.length;i++)
  46.  {
  47.  if (num!=i.toString()){
  48.  nlistbox=eval(lb[i].listname)
  49.  nlistbutton=eval(lb[i].buttonname)
  50.  nlistvalue=eval(lb[i].valuename)
  51.  nlistbox.className="lostlist";nlistbutton.className="menubar"
  52.  nlistbox.gf="0"
  53.   }
  54.  }
  55.   ShowMenu(listbox,showlist,tw,scroll);listbox.className="getlist";listbox.gf="1"
  56.   listnum=num;
  57.   break;
  58.   }
  59. }
  60. function HideMenu() 
  61. {
  62.  var mX;
  63.  var mY;
  64.  var vDiv;
  65.  var mDiv;
  66.     if (isvisible == true)
  67.     {
  68.         vDiv = document.all("listDiv");
  69.         mX = window.event.clientX + document.body.scrollLeft;
  70.         mY = window.event.clientY + document.body.scrollTop;
  71.         if ((mX < parseInt(vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) || 
  72.             (mY < parseInt(vDiv.style.top)-menu_height) || (mY > parseInt(vDiv.style.top)+vDiv.offsetHeight))  {
  73.             vDiv.style.visibility = "hidden";
  74.             isvisible = false;
  75.         }
  76.     }
  77.     
  78.     if (isvisible==false)
  79.     {
  80.      for (i=0;i<lb.length;i++)
  81.  {
  82.  listbox=eval(lb[i].listname)
  83.  listbutton=eval(lb[i].buttonname)
  84.  listvalue=eval(lb[i].valuename)
  85.  listbox.className="lostlist";listbutton.className="menubar"
  86.  listbox.gf="0"
  87.  }
  88.     }
  89. }
  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>";
  94.     menu_height = obj.offsetHeight;
  95.     menu_width = obj.offsetWidth;
  96.     menu_left = obj.offsetLeft + leftMar+2;
  97.     menu_top = obj.offsetTop + topMar + menu_height + space-3;
  98.     vParent = obj.offsetParent;
  99.     while (vParent.tagName.toUpperCase() != "BODY")
  100.     {
  101.         menu_left += vParent.offsetLeft;
  102.         menu_top += vParent.offsetTop;
  103.         vParentvParent = vParent.offsetParent;
  104.     }
  105.     listDiv.innerHTML = vMnuCode;
  106.     listDiv.style.top = menu_top;
  107.     listDiv.style.left = menu_left;
  108.     if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}
  109. else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}
  110.     listDiv.style.visibility = "visible";
  111.     var cssopaction=submenu.filters[0].opacity
  112.     submenu.filters[0].opacity=0;
  113.     submenu.filters[1].Apply();
  114.     submenu.filters[0].opacity=100;
  115.     submenu.filters[1].Play();
  116.       
  117.     isvisible = true;
  118. }
  119. function menuitem(lightcolor,normalcolor,icon,title,url)
  120. {
  121. this.lightcolor=lightcolor
  122. this.normalcolor=normalcolor
  123. this.icon=icon
  124. this.title=title
  125. this.url=url
  126. }
  127. function bulidmenu(arrayname)
  128. {
  129. var menuarray=eval(arrayname)
  130. menucontent='<table border="0" width="100%">'
  131. for (i=0;i<menuarray.length;i++)
  132. {
  133. if (menuarray[i].title!="_line")
  134. {
  135. if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}
  136. if (menuarray[i].icon.length==0)
  137. {
  138. content='<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class="'+css+'">'+menuarray[i].title+'</td></tr></table>'
  139. }
  140. else
  141. {
  142. 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>'
  143. }
  144. if (menuarray[i].url!="_disable"){
  145. menucontentmenucontent=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>'
  146. }
  147. else
  148. {
  149. menucontentmenucontent=menucontent+'<tr><td height=16 style="fitler:gray">'+content+'</td></tr>'
  150. }
  151. }
  152. else
  153. {
  154. menucontentmenucontent=menucontent+'<tr><td height=4><img src="images/dock.gif" width="99%" height=1></td></tr>'
  155. }
  156. }
  157. menucontentmenucontent=menucontent+"</table>"
  158. return menucontent
  159. }
  160.  function HL_Menu(obj,state)
  161. {
  162. switch (state)
  163. {
  164. case 0:
  165.  obj.className="menuover"
  166.  break;
  167. case 1:
  168.  obj.className="menuup"
  169.  break;
  170. }
  171.  }
  172. var lb=new Array()
  173. lb[0]=new listbox('listbox0','listbutton0','listvalue0')
  174. lb[1]=new listbox('listbox1','listbutton1','listvalue1')
  175. var list1=new Array()
  176. list1[0]=new menuitem("#B1CBE4","","","ListItem1","")
  177. list1[1]=new menuitem("#B1CBE4","","","ListItem2","")
  178. list1[2]=new menuitem("#B1CBE4","","","ListItem3","")
  179. list1[3]=new menuitem("#B1CBE4","","","ListItem4","")
  180. list1[4]=new menuitem("#B1CBE4","","","ListItem5","")
  181. list1[5]=new menuitem("#B1CBE4","","","ListItem6","")
  182. list1[6]=new menuitem("#B1CBE4","","","ListItem7","")
  183. list1[7]=new menuitem("#B1CBE4","","","ListItem8","")
  184. list1[8]=new menuitem("#B1CBE4","","","ListItem9","")
  185. list1[9]=new menuitem("#B1CBE4","","","ListItem10","")
  186. blist1=bulidmenu("list1")
  187. var list2=new Array()
  188. list2[0]=new menuitem("#B1CBE4","","","字体1","")
  189. list2[1]=new menuitem("#B1CBE4","","","字体2","")
  190. list2[2]=new menuitem("#B1CBE4","","","字体3","")
  191. list2[3]=new menuitem("#B1CBE4","","","字体4","")
  192. list2[4]=new menuitem("#B1CBE4","","","字体5","")
  193. list2[5]=new menuitem("#B1CBE4","","","字体6","")
  194. list2[6]=new menuitem("#B1CBE4","","","字体7","")
  195. list2[7]=new menuitem("#B1CBE4","","","字体8","")
  196. list2[8]=new menuitem("#B1CBE4","","","字体9","")
  197. list2[9]=new menuitem("#B1CBE4","","","字体10","")
  198. blist2=bulidmenu("list2")
  199. function Golist(text)
  200. {
  201. listvalue=eval(lb[listnum].valuename)
  202. listvalue.innerText=text
  203. vDiv = document.all("listDiv");
  204. vDiv.style.visibility = "hidden";
  205. isvisible = false;
  206. </script>
  207. <style>
  208. .lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  209. .getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
  210. .menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)}
  211. .bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)}
  212. .leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand }
  213. .getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default }
  214. .lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; }
  215. .menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;}
  216. .menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; }
  217. .lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  218. .getlist  { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
  219. .listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B}
  220. .listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); }
  221. </style>
  222. </head>
  223. <body onclick="HideMenu()" style="margin:0px" bgcolor="999999">
  224. <div id=listDiv style='border:1px #636563 solid;VISIBILITY: hidden;POSITION: absolute;overflow:scroll;height:150'></div>
  225. <table border="0" width="100%" id="table27" class="bodybar" cellspacing="0" cellpadding="0">
  226.     <tr>
  227.         <td>
  228. <table border="0" cellspacing="0" cellpadding="0" height="30">
  229.     <tr>
  230.         <td><table border="0" cellspacing="0" cellpadding="0" height="22">
  231.             <tr>
  232.                 <td width="5"></td>
  233.                 <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  234.                 <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">文件(F)</td></tr></table>
  235.                 </td>
  236.                 <td width="5"></td>
  237.                 <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  238.                 <table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">编辑(E)</td></tr></table>
  239.                 </td>
  240.             </tr>
  241.         </table></td>
  242.     </tr>
  243. </table>
  244.         </td>
  245.     </tr>
  246.     <tr>
  247.         <td>
  248. <table border="1" width="100" id="table28" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7"  style="border-collapse: collapse">
  249.     <tr>
  250.         <td class="menubar">
  251.             <table border="0" width="100%" id="table29" cellspacing="0" cellpadding="0">
  252.                 <tr>
  253.                    <td width="10" nowrap>
  254.                     <table border="0" width="2" cellspacing="0" cellpadding="1" id="table30">
  255.             <tr>
  256.                 <td><img style="border:1px inset" height=1 width=1></td>
  257.             </tr>
  258.             <tr>
  259.                 <td><img style="border:1px inset" height=1 width=1></td>
  260.             </tr>
  261.             <tr>
  262.                 <td><img style="border:1px inset" height=1 width=1></td>
  263.             </tr>
  264.             <tr>
  265.                 <td><img style="border:1px inset" height=1 width=1></td>
  266.             </tr>
  267.             </table></td>
  268.                     <td width="35" nowrap><font size="2">姓名</font></td>
  269.                     <td width="130" nowrap>
  270.             <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>
  271.                     <td width="35" nowrap><font size="2">密码</font></td>
  272.                     <td width="124" nowrap>
  273.             <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>
  274.                     <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
  275.                     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  276.                 <table cellspacing="0" cellpadding="0" id="table31" width="25"><tr><td nowrap></td><td class="leftitem">
  277.                     登陆</td></tr></table>
  278.                 </td>
  279.                     <td width="100%" nowrap> </td>
  280.                 </tr>
  281.             </table>
  282.         </td>
  283.     </tr>
  284. </table>
  285.         </td>
  286.     </tr>
  287.     <tr>
  288.         <td>
  289. <table border="1" width="100" id="table32" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7"  style="border-collapse: collapse">
  290.     <tr>
  291.         <td class="menubar">
  292.             <table border="0" width="100%" id="table33" cellspacing="0" cellpadding="0">
  293.                 <tr>
  294.                    <td width="10" nowrap>
  295.                     <table border="0" width="2" cellspacing="0" cellpadding="1" id="table34">
  296.             <tr>
  297.                 <td><img style="border:1px inset" height=1 width=1></td>
  298.             </tr>
  299.             <tr>
  300.                 <td><img style="border:1px inset" height=1 width=1></td>
  301.             </tr>
  302.             <tr>
  303.                 <td><img style="border:1px inset" height=1 width=1></td>
  304.             </tr>
  305.             <tr>
  306.                 <td><img style="border:1px inset" height=1 width=1></td>
  307.             </tr>
  308.             </table></td>
  309.                     <td width="78" nowrap>
  310.             <div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' style="cursor:default">
  311.             <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35">
  312.     <tr>
  313.         <td valign=center style="text-indent:4px"><font size="2" face="Verdana">
  314.         <span id=listvalue0>
  315.           </span></font></td>
  316.         <td width=12 align="center" class="menubar" id="listbutton0">
  317.     <table border="0" cellpadding="0" style="border-collapse: collapse" id="table36">
  318.         <tr height=1>
  319.             <td width="1" bgcolor="#000000"></td>
  320.             <td width="1" bgcolor="#000000"></td>
  321.             <td width="1" bgcolor="#000000"></td>
  322.             <td width="1" bgcolor="#000000"></td>
  323.             <td width="1" bgcolor="#000000"></td>
  324.         </tr>
  325.         <tr height=1>
  326.             <td></td>
  327.             <td bgcolor="#000000"></td>
  328.             <td bgcolor="#000000"></td>
  329.             <td bgcolor="#000000"></td>
  330.             <td></td>
  331.         </tr>
  332.         <tr height=1>
  333.             <td></td>
  334.             <td></td>
  335.             <td bgcolor="#000000"></td>
  336.             <td></td>
  337.             <td></td>
  338.         </tr>
  339.     </table></td>
  340.     </tr>
  341.     </table>
  342.             
  343.             </div></td>
  344.                     <td width="78" nowrap>
  345.             <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">
  346.             <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37">
  347.     <tr>
  348.         <td valign=center style="text-indent:4px"><font size="2" face="Verdana"><span id=listvalue1>
  349.           </span></font></td>
  350.         <td width=12 align="center" class="menubar" id="listbutton1">
  351.     <table border="0" cellpadding="0" style="border-collapse: collapse" id="table38">
  352.         <tr height=1>
  353.             <td width="1" bgcolor="#000000"></td>
  354.             <td width="1" bgcolor="#000000"></td>
  355.             <td width="1" bgcolor="#000000"></td>
  356.             <td width="1" bgcolor="#000000"></td>
  357.             <td width="1" bgcolor="#000000"></td>
  358.         </tr>
  359.         <tr height=1>
  360.             <td></td>
  361.             <td bgcolor="#000000"></td>
  362.             <td bgcolor="#000000"></td>
  363.             <td bgcolor="#000000"></td>
  364.             <td></td>
  365.         </tr>
  366.         <tr height=1>
  367.             <td></td>
  368.             <td></td>
  369.             <td bgcolor="#000000"></td>
  370.             <td></td>
  371.             <td></td>
  372.         </tr>
  373.     </table></td>
  374.     </tr>
  375.     </table>
  376.             
  377.             </div></td>
  378.                     <td width="4" nowrap>
  379.              </td>
  380.                     <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
  381.                     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  382.                 <table cellspacing="0" cellpadding="0" id="table39" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  383.                     <b>B</b></td></tr></table>
  384.                 </td>
  385.                                     <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  386.                 <table cellspacing="0" cellpadding="0" id="table40" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  387.                     <i>
  388.                     <b>I</b></i></td></tr></table>
  389.                 </td>
  390.                 <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
  391.                 <table cellspacing="0" cellpadding="0" id="table41" width="16"><tr><td nowrap></td><td class="leftitem" align=center>
  392.                     <u>
  393.                     <b>U</b></u></td></tr></table>
  394.                 </td>
  395.                     <td width="100%" nowrap> </td>
  396.                 </tr>
  397.             </table>
  398.         </td>
  399.     </tr>
  400. </table>
  401.         </td>
  402.     </tr>
  403. </table>
  404. <p><font size="2" color="#FFFFFF">工作之余做了这个小东西<br>仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和Javascript做的<br>菜单就不做了,偷懒中<br>
  405. <br>
  406. 感兴趣的朋友可以和我联系,大家交流交流.</font></p>
  407. <p><b><font size="2" color="#FFFFFF"><a href="mailto:puterjam@etang.com">
  408. <font color="#FFFFFF" face="Arial">PuterJam@etang.com</font></a></font></b>
  409. </p>
  410. </body>
  411. </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值