萍聚 › INFO天空 › javascript编写的菜单类

comego 发表于 2004-10-29 14:17

javascript编写的菜单类

<style>
.menuFont{font-size:12px;height:20px;}
</style>
<script language="javascript">

//========================================================================
//Menus类
//========================================================================

//显示菜单
function setVisible(){
eval(this.menuId+".style.visibility='visible';");
}
//隐藏菜单
function setHidden(){
eval(this.menuId+".style.visibility='hidden';");
}



//加菜单
function addMenu(menuHTML,menuEventname,eventValue){

var tr,td;
eval("tr="+this.menuId+".children.appendChild(document.createElement(\"tr\"));");
td=tr.appendChild(document.createElement("td"));
tr.className="menuFont";
td.onmouseover=function(){this.style.backgroundColor='#0A246A';
                            this.style.color='#ffffff';
                            }
td.onmouseout=function(){this.style.backgroundColor='#D4D0C8';
                            this.style.color='#000000';
                            }
td.innerHTML=menuHTML;
eval("td."+menuEventname+"=function(){"+eventValue+";}");

}


//Menus对象名与“menuId”参数不能同名

function Menus(menuId,menuButton,menuWidth,menuX,menuY){

this.menuId=menuId;
this.menuWidth=menuWidth;
this.menuX=menuX;
this.menuY=menuY;
this.menuButton=menuButton;


document.write("<table   id="+this.menuId+"style=' cursor: default; position:absolute; top:"+this.menuY+"px; left:"+this.menuX+"px;width:"+this.menuWidth+"; visibility :hidden; background-color:#D4D0C8; border : 2px outset transparent;' ></table>");

with(this){
eval(this.menuId).onmouseout=function(){setHidden(); MenuButton.prototype.showMake=false;menuButton.resum();}
eval(this.menuId).onmouseover=function(){setVisible(); MenuButton.prototype.showMake=true;menuButton.setInset();}
}
}


Menus.prototype.setVisible=setVisible;
Menus.prototype.setHidden=setHidden;
Menus.prototype.addMenu=addMenu;
//================================================================================================






//=====================================================================================================
//MenuButton类
//======================================================================================================

function resum(){
eval(this.buttonId).children.children.children.style.border='';
//this.showMake=false;
}

function setInset(){
   eval(this.buttonId).children.children.children.style.border='2px inset transparent';
   MenuButton.prototype.showMake=true;
}

function setOutset(){
   eval(this.buttonId).children.children.children.style.border='2px outset transparent';
}

//MenuButton对象名与“buttonId”参数不能同名
function MenuButton(buttonName,buttonId,buttonX,buttonY,buttonEvent){
this.buttonName=buttonName;
this.buttonId=buttonId;
this.buttonX=buttonX;
this.buttonY=buttonY;
this.buttonEvent=buttonEvent;

document.write(" <table id="+this.buttonId+"   style=' width:70px; cursor: default; position:absolute; top:"+this.buttonY+"px; left:"+this.buttonX+"px;visibility : visible; background-color:#D4D0C8;'>");
document.write("<tr ><td class=menuFont>"+this.buttonName);
document.write("</td></tr></table>");

this.childrenMenus=new Menus(this.buttonId+"001",this,100,this.buttonX,this.buttonY+eval(this.buttonId).offsetHeight);


with(this){
eval(this.buttonId).onmouseover=function(){if(showMake){setInset();childrenMenus.setVisible();}else{setOutset();}}
eval(this.buttonId).onmouseout=function(){resum();childrenMenus.setHidden();}
eval(this.buttonId).onmousedown=function(){setInset(); childrenMenus.setVisible();}
}

}
MenuButton.prototype.resum=resum;
MenuButton.prototype.setInset=setInset;
MenuButton.prototype.setOutset=setOutset;
MenuButton.prototype.showMake=false;


//===============================================================================================================






var aa=new MenuButton("工具(T)","ab",100,100,"c.setVisible();");
var ff=new MenuButton("格式(o)","cf",100+eval(aa.buttonId).offsetWidth,100,"bb.setVisible();");


aa.childrenMenus.addMenu("显示","onclick","alert('a');");
aa.childrenMenus.addMenu("显示","onclick","alert('b');");
aa.childrenMenus.addMenu("显示","onclick","alert('c');");
aa.childrenMenus.addMenu("显示","onclick","");
aa.childrenMenus.addMenu("显示","onclick","");
aa.childrenMenus.addMenu("显示","onclick","");

ff.childrenMenus.addMenu("隐藏","onclick","alert('e');");
ff.childrenMenus.addMenu("隐藏","onclick","alert('f');");
ff.childrenMenus.addMenu("隐藏","onclick","alert('g');");
ff.childrenMenus.addMenu("隐藏","onclick","");
ff.childrenMenus.addMenu("隐藏","onclick","");
ff.childrenMenus.addMenu("隐藏","onclick","");
ff.childrenMenus.addMenu("隐藏","onclick","");
ff.childrenMenus.addMenu("隐藏","onclick","");
ff.childrenMenus.addMenu("隐藏","onclick","");

</script>


</head>

查看完整版本: javascript编写的菜单类