office

位置:IT落伍者 >> office >> 浏览文章

仿Office2003的工具条


发布日期:2022年05月21日
 
仿Office2003的工具条

<html>

<head>

<meta httpequiv=ContentLanguage content=zhcn>

<meta httpequiv=ContentType content=text/html; charset=gb>

<title>仿Office 的工具条</title>

<script>

/*

舜子制作

Menu Javascript Made by PuterJam

Email:

*/

var listnum=;

var menu_height;

var menu_width;

var menu_left;

var menu_top;

var topMar = ;

var leftMar = ;

var space = ;

var isvisible;

function listbox(listnamebuttonnamevaluename)

{

thislistname=listname

thisbuttonname=buttonname

thisvaluename=valuename

}

function listaction(objactionshowlistscrolltw)

{

num=objidcharAt(objidlength)

if (!scroll) {scroll=}

if (!tw) {tw=}

listbox=eval(lb[num]listname)

listbutton=eval(lb[num]buttonname)

listvalue=eval(lb[num]valuename)

switch (action)

{

case :

listboxclassName=getlist;listbuttonclassName=listover

break;

case :

if (listboxgf==)

{listboxclassName=lostlist;listbuttonclassName=menubar}

break;

case :

for (i=;i<lblength;i++)

{

if (num!=itoString()){

nlistbox=eval(lb[i]listname)

nlistbutton=eval(lb[i]buttonname)

nlistvalue=eval(lb[i]valuename)

nlistboxclassName=lostlist;nlistbuttonclassName=menubar

nlistboxgf=

}

}

ShowMenu(listboxshowlisttwscroll);listboxclassName=getlist;listboxgf=

listnum=num;

break;

}

}

function HideMenu()

{

var mX;

var mY;

var vDiv;

var mDiv;

if (isvisible == true)

{

vDiv = documentall(listDiv);

mX = windoweventclientX + documentbodyscrollLeft;

mY = windoweventclientY + documentbodyscrollTop;

if ((mX < parseInt(vDivstyleleft)) || (mX > parseInt(vDivstyleleft)+vDivoffsetWidth) ||

(mY < parseInt(vDivstyletop)menu_height) || (mY > parseInt(vDivstyletop)+vDivoffsetHeight)) {

vDivstylevisibility = hidden;

isvisible = false;

}

}

if (isvisible==false)

{

for (i=;i<lblength;i++)

{

listbox=eval(lb[i]listname)

listbutton=eval(lb[i]buttonname)

listvalue=eval(lb[i]valuename)

listboxclassName=lostlist;listbuttonclassName=menubar

listboxgf=

}

}

}

function ShowMenu(objvMnuCodetWidthscroll) {

vMnuCode = <table id=submenu cellspacing= cellpadding= bgcolor=#ffffff border= style=width:+tWidth +

;bordercollapse: collapse class=listDiv><tr height=><td nowrap align=left> +

vMnuCode + </td></tr></table>;

menu_height = objoffsetHeight;

menu_width = objoffsetWidth;

menu_left = objoffsetLeft + leftMar+;

menu_top = objoffsetTop + topMar + menu_height + space;

vParent = objoffsetParent;

while (vParenttagNametoUpperCase() != BODY)

{

menu_left += vParentoffsetLeft;

menu_top += vParentoffsetTop;

vParent = vParentoffsetParent;

}

listDivinnerHTML = vMnuCode;

listDivstyletop = menu_top;

listDivstyleleft = menu_left;

if (scroll==) {listDivstyleoverflow=visible;listDivstylewidth=tWidth}

else {listDivstyleoverflow=scroll;listDivstylewidth=tWidth+}

listDivstylevisibility = visible;

var cssopaction=submenufilters[]opacity

submenufilters[]opacity=;

submenufilters[]Apply();

submenufilters[]opacity=;

submenufilters[]Play();

isvisible = true;

}

function menuitem(lightcolornormalcoloricontitleurl)

{

thislightcolor=lightcolor

thisnormalcolor=normalcolor

thisicon=icon

thistitle=title

thisurl=url

}

function bulidmenu(arrayname)

{

var menuarray=eval(arrayname)

menucontent=<table border= width=%>

for (i=;i<menuarraylength;i++)

{

if (menuarray[i]title!=_line)

{

if (menuarray[i]url!=_disable){css=getitem}else{css=lostitem}

if (menuarray[i]iconlength==)

{

content=<table cellspacing= cellpadding=><tr><td  class=+css+>+menuarray[i]title+</td></tr></table>

}

else

{

content=<table cellspacing= cellpadding=><tr><td width= 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=  onmouseover=stylebackgroundColor=\+ menuarray[i]lightcolor+\ onmouseout=stylebackgroundColor=\+ menuarray[i]normalcolor+\ onclick=Golist(\+menuarray[i]title+\)>+content+</td></tr>

}

else

{

menucontent=menucontent+<tr><td height= >+content+</td></tr>

}

}

else

{

menucontent=menucontent+<tr><td height=><img src=images/dockgif width=% height=></td></tr>

}

}

menucontent=menucontent+</table>

return menucontent

}

function HL_Menu(objstate)

{

switch (state)

{

case :

objclassName=menuover

break;

case :

objclassName=menuup

break;

}

}

var lb=new Array()

lb[]=new listbox(listboxlistbuttonlistvalue)

lb[]=new listbox(listboxlistbuttonlistvalue)

var list=new Array()

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

list[]=new menuitem(#BCBEListItem)

blist=bulidmenu(list)

var list=new Array()

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

list[]=new menuitem(#BCBE字体)

blist=bulidmenu(list)

function Golist(text)

{

listvalue=eval(lb[listnum]valuename)

listvalueinnerText=text

vDiv = documentall(listDiv);

vDivstylevisibility = hidden;

isvisible = false;

}

</script>

<style>

lostfocus { border: px #ffffff solid; backgroundcolor: #ffffff; fontsize: px; fontfamily: Arial; }

getfocus { border: px #B solid;backgroundcolor: #ffffff; fontfamily: Arial; fontsize: px; }

.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; }.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()"  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" >

<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  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 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  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" >

<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  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 width="78" nowrap>

<div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' >

<table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35">

<tr>

<td valign=center ><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"  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)' >

<table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37">

<tr>

<td valign=center ><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"  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  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 mailto:">

<font color="#FFFFFF" face="Arial"></font></a></font></b>

</p>

</body>

</html>

               

上一篇:HelloWord 编译方法以及常见错误

下一篇:深入解析contentWindow, contentDocument