欢迎光临
我们一直在努力
当前位置：IDC资讯中心 > 网页制作 > Javascript教程 > 正文

仿office 2003的工具条_javascript教程

2007-08-23 分类：Javascript教程 阅读(529) 评论(0)
建站超值云服务器，限时71元/月

<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 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=”http://www.knowsky.com/+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.knowsky.com/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″>
<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>
   &nbsp;</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>
   &nbsp;</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>

赞(0)
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » 仿office 2003的工具条_javascript教程
分享到： 更多 (0)

相关推荐

热门标签

ldquo (1370)win (1324)活动 (1166)ios (1162)rdquo (818)微信 (747)iphone (728)小米 (722)windows (706)手机 (698)酷跑 (686)飞车 (540)天天 (492)qq (491)网站 (457)全民 (442)discuz (408)充值 (389)安装 (368)更新 (321)华为 (300)浏览器 (292)支付宝 (289)三星 (266)note (264)教程 (262)预览版 (261)小编 (258)越狱 (254)linux (248)

热门文章

分类目录