用popup实现右键多级菜单

网上已经有很多实现右键菜单的文章，本菜单也是在参考网上的经验之后写成。如有好的意见和建议欢迎留言

本菜单的特点：

1、可动态添加菜单项和子菜单

2、可用css控制菜单表现

菜单样式如下：

代码如下：

 .menuMain {
  font-size: 12p;
  background: #ffffff;
  

  BORDER-RIGHT: gold 1px solid;
  BORDER-TOP: gold 1px solid;
  BORDER-LEFT: gold 1px solid;

 }
 .menuNormal
 {
  valign:middle;
  text-align:center;
  background-color:#ffffff;
  font-size: 12px;
         color:#000000;  
  cursor:default;
  FILTER:0;

  BORDER-BOTTOM: gold 1px solid;
 }
 .menuHot
 {
  valign:middle;
  text-align:center;
  background-color:#ffffff;;
  font-size: 12px;
         color:#ffffff;  
  cursor:default;
  FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF);

  BORDER-BOTTOM: gold 1px solid;
  }

popmenu.js

//p.mainMenu.document.styleSheets
//右键菜单
/*
 cssFile:菜单模式css文件
 nomalClass:菜单子项的普通模式
 hotClass:菜单子项获得焦点模式
 menuClass:菜单模式
 menuWidth:菜单宽度
*/
PopMenu=function(cssFile,nomalClass,hotClass,menuClass,menuWidth)
{
 //初始化菜单式样
 this.nomalClass=nomalClass;
 this.hotClass=hotClass;
 this.menuClass=menuClass;
 this.menuWidth=menuWidth;
 this.cssFile=cssFile;
 this.menuItem=null;
 this.parentMenu=null;
 this.childMenu=null;
 this.childIndex=null;
 this.top=null;
 this.left=null;
 
}
//创建菜单
PopMenu.prototype.createMenu=function()
{
 this.menuItem=new Array();
 if(this.parentMenu!=null)
  this.mainMenu=this.parentMenu.mainMenu.document.parentWindow.createPopup();
 else
  this.mainMenu=window.createPopup();
  
 
 this.mainMenu.document.createStyleSheet(this.cssFile);
 
 this.menuTable=createTable(this.mainMenu.document,this.menuClass);
    this.mainMenu.document.oncontextmenu=function()
    {

            return false;

    }
    var pop=this.mainMenu;
    var mt=this;
   this.mainMenu.document.onclick=function()

    {
   clearSelMenu(mt);
            pop.hide();

    }

}
//创建子菜单
PopMenu.prototype.createChildMenu=function(index,menuWidth)
{
 if(this.childMenu!=null)
  this.childMenu.clear();
 else
 {
  this.childMenu=new PopMenu(this.cssFile,this.nomalClass,this.hotClass,this.menuClass,this.menuWidth)
  this.childMenu.parentMenu=this;
  this.childMenu.createMenu();
 }
 this.childIndex=index;
 this.childMenu.menuWidth=menuWidth;
 return this.childMenu;
}
//创建菜单项

/*

texttext:菜单项内容

clickFunciton：点击执行方法

menuId：菜单项ID(暂时未用到，留做扩充;

*/
PopMenu.prototype.addMenuItem=function(text,clickFunciton,menuId)
{
 var tindex=this.menuItem.length
 var menu={index:tindex,menuId:menuId}
 this.menuItem[tindex]=menu;
 
 var t=this.mainMenu.document.createElement("tr");
 var td=this.mainMenu.document.createElement('td');
 td.className=this.nomalClass;
 td.innerText=text;
 
 var pop=this;
 td.id=tindex
 var hc=this.hotClass;

 td.onmouseover=function()
    {
         this.className=pop.hotClass;
          
     //显示子菜单
            if(pop.childMenu!=null) pop.childMenu.hide();
            if(pop.childMenu!=null&&this.id==pop.childIndex)
            {
    clearSelMenu(pop.childMenu);

    var rowCount=pop.childMenu.menuTable.rows.length
    pop.childMenu.mainMenu.show(pop.menuWidth,25*pop.childIndex,pop.childMenu.menuWidth,rowCount*25,pop.mainMenu.document.body);
            }

    } 
    var pop2=this;

    td.onmouseout=function()
    {
  this.className=pop2.nomalClass;

    }
 t.appendChild(td);
    if(clickFunciton!=null) t.onclick=clickFunciton;
    this.menuTable.appendChild(t);

}
//显示菜单
PopMenu.prototype.showMenu=function()
{
 var rowCount=this.menuTable.rows.length

    this.mainMenu.show(event.clientX-1,event.clientY,this.menuWidth,rowCount*25,document.body);

}
//菜单隐藏
PopMenu.prototype.hide=function()
{
 this.mainMenu.hide();
}

//创建容纳菜单项的表格
function createTable(p,className)
{
 //var t=p.createElement('<table border="1" width="100%" height="100%" bgcolor="#ffffff" style="border:thin;font-size: 12px" cellspacing="0"  bordercolor="#336633" >');
 var t=p.createElement('<table width="100%" height="100%" cellpadding="0" cellspacing="0">');

 t.className=className;
 t.width="100%";
 t.height="100%";
 var tb=p.createElement("TBody");
 if(t!=null&&tb!=null);
  t.appendChild(tb);
  
  
 if(p!=null)
  p.body.appendChild(t);
 return tb;

}
//菜单复原，清除选择
clearSelMenu=function(pop)
{

    //循环设置每行的属性
    var mt=pop.menuTable

    for(var i=0;i<mt.children.length;i++)

    {
  mt.children[i].children[0].className=pop.nomalClass;
 
 }
}
//清除菜单项
PopMenu.prototype.clear=function()
{
 this.menuItem.length=0;
 if(this.menuTable.children.length==0) return;
    for(var i=this.menuTable.children.length-1;i>=0;i--)

    {
  this.menuTable.removeChild(this.menuTable.children[i]);
 
 }

}

/////////////////////////////

test.htm:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="popmenu.css" type="text/css" >

<script type="text/javascript" src="js/popmenu.js"></script>

<script language=javascript>
var popMenu;
function itemClick1(text)
{
 alert('item:'+text);
}
function itemClick2(text,index)
{
 alert('item2:'+text+','+index);
}
function childmenuClick(text,index)
{
 alert('childMenu:'+text+','+index);
}

function initPopmenu()
{
 
 //参数:菜单显示模式的css文件，菜单项普通模式，菜单项获得焦点模式，菜单整体模式，菜单宽度
 popMenu=new PopMenu('popmenu.css','menuNormal','menuHot','menuMain',100);

 popMenu.createMenu();//创建菜单
 var a='test1';
 var a2='test2';
 var a3=5;
 
 popMenu.addMenuItem('test1',function(){itemClick1(a);},null);
 popMenu.addMenuItem('test2',function(){itemClick2(a2,a3);},null);
 popMenu.addMenuItem('test3',null,null);
 popMenu.addMenuItem('test4',null,null); 
  //创建第二级菜单
 var childMenu=popMenu.createChildMenu(2,100);//参数:子菜单父亲的index（用于定位),菜单宽度
 var a4='childmenuclick';
 var a5=10;
 childMenu.addMenuItem('test3--1',function(){childmenuClick(a4,a5)},null)
 childMenu.addMenuItem('test3--2',null,null)
 
 var ddMenu=childMenu.createChildMenu(1,100);
 ddMenu.addMenuItem('test3--2--1',null,null)
 ddMenu.addMenuItem('test3--2--2',null,null)

}

function showMenu()

{

 popMenu.showMenu();
}  
  
  //////////

 </script>

</head>

<body leftmargin="0" topmargin="0"   onLoad="initPopmenu()"  oncontextmenu="showMenu(); return false;"  >

</body>
 
</html>