JS技术

仿Office 2003的工具条_javascript教程教程

字号+ 作者：H5之家 来源：H5之家 2015-10-09 14:05 我要评论( )

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@

<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 cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0><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>'
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>'+menuarray[i].title+'</td></tr></table>'
}
else
{
content='<table cellspacing="0" cellpadding="0"><tr><td nowrap><img src="'+menuarray[i].icon+'"></td><td>'+menuarray[i].title+'</td></tr></table>'
}

if (menuarray[i].url!="_disable"){
menucontent=menucontent+'<tr><td height=16>'+content+'</td></tr>'
}
else
{
menucontent=menucontent+'<tr><td height=16>'+content+'</td></tr>'
}

}
else
{
menucontent=menucontent+'<tr><td height=4><img src="images/dock.gif" 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 bgcolor="999999">
<div id=listDiv></div>
<table cellspacing="0" cellpadding="0">
 <tr>
  <td>
<table cellspacing="0" cellpadding="0">
 <tr>
  <td><table cellspacing="0" cellpadding="0">
   <tr>
       <td></td>
    <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td>文件(F)</td></tr></table>
    </td>
    <td></td>
    <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td>编辑(E)</td></tr></table>
    </td>
   </tr>
  </table></td>
 </tr>
</table>
  </td>
 </tr>
 <tr>
  <td>
<table cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" >
 <tr>
  <td>
   <table cellspacing="0" cellpadding="0">
    <tr>
       <td nowrap>
     <table cellspacing="0" cellpadding="1">
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   </table></td>
     <td nowrap><font size="2">姓名</font></td>
     <td nowrap>
   <input type="text" size="18" gf="0" onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'></td>
     <td nowrap><font size="2">密码</font></td>
     <td nowrap>
   <input type="password" size="18" gf="0" onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'></td>
     <td nowrap><img height=14 width=0></td>
     <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td nowrap></td><td>
     登陆</td></tr></table>
    </td>
     <td nowrap>　</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

  </td>
 </tr>
 <tr>
  <td>

<table cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" >
 <tr>
  <td>
   <table cellspacing="0" cellpadding="0">
    <tr>
       <td nowrap>
     <table cellspacing="0" cellpadding="1">
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   <tr>
    <td><img height=1 width=1></td>
   </tr>
   </table></td>
     <td nowrap>
   <div gf="0">
   <table cellpadding="0" cellspacing="0">
 <tr>
  <td valign=center><font size="2" face="Verdana">
  <span id=listvalue0>
   &nbsp;</span></font></td>
  <td width=12>
 <table cellpadding="0">
  <tr height=1>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td 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 nowrap>
   <div gf="0">
   <table cellpadding="0" cellspacing="0">
 <tr>
  <td valign=center><font size="2" face="Verdana"><span id=listvalue1>
   &nbsp;</span></font></td>
  <td width=12>
 <table cellpadding="0">
  <tr height=1>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td bgcolor="#000000"></td>
   <td 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 nowrap>
   　</td>
     <td nowrap><img height=14 width=0></td>
     <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td nowrap></td><td align=center>
     <b>B</b></td></tr></table>
    </td>
         <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td nowrap></td><td align=center>
     <i>
     <b>I</b></i></td></tr></table>
    </td>
    <td nowrap>
    <table cellspacing="0" cellpadding="0"><tr><td nowrap></td><td align=center>
     <u>
     <b>U</b></u></td></tr></table>
    </td>
     <td 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>

　

查看仿Office 20

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 仿Office 2003的工具条

    仿Office 2003的工具条

    2014-11-17 20:00

网友点评
精彩导读
【JavaScript.2】辨析Typeof操作符作用，罗列JS五大数据类型阵容 - 孟东辉 廊坊师范学院信息技术提高班

【JavaScript.2】辨析Typeof操作符作用，罗列

Word Search -- LeetCode - Code Ganker - 博客频道 - CSDN.NET Code

Word Search -- LeetCode - Code Ganker - 博

ubuntu 14.04 安装 minidwep-gtk, aircrack-ng, reaver 搭建抓包环境 - 心

ubuntu 14.04 安装 minidwep-gtk, aircrack-n

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博客频道 - CSDN.NET 巫_1曲待续 一个人走到任何境地全都是因

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博

ubuntu thrift 0.9.3编译安装 - Dean Chen的专栏 - 博客频道 - CSDN.NET Dea

ubuntu thrift 0.9.3编译安装 - Dean Chen的

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习