用popup实现右键多级菜单

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

本菜单的特点：

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

2、可用css控制菜单表现

菜单样式如下：

 

代码如下：

popmenu.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.menuBody.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.menuItems=new Array();
 this.parentMenu=null;
 this.childMenus=new Array();
 this.hotChild=null;
 this.parentIndex=null;
 
 this.menuBody=null;//菜单体
 
 this.top=null;
 this.left=null;
 
}
/*
//创建菜单
PopMenu.prototype.createMenu=function()
{
 this.menuItem=
 
 /*
 if(this.parentMenu!=null)
  this.menuBody=this.parentMenu.menuBody.document.parentWindow.createPopup();
 else
  this.menuBody=window.createPopup();
  
 
 this.menuBody.document.createStyleSheet(this.cssFile);
 
 this.menuTable=createTable(this.menuBody.document,this.menuClass);
    this.menuBody.document.oncontextmenu=function()
    {

            return false;

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

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

    }

}*/
//创建子菜单
PopMenu.prototype.createChildMenu=function(index,menuWidth)
{
 var newp=new PopMenu(this.cssFile,this.nomalClass,this.hotClass,this.menuClass,menuWidth);
 
 newp.parentMenu=this;
 newp.parentIndex=index;
 
 this.childMenus[this.childMenus.length]=newp;

 return newp;
}
//创建菜单项
PopMenu.prototype.addMenuItem=function(text,clickFunciton,menuId)
{
 var tindex=this.menuItems.length
 var menu={index:tindex,menuId:menuId,text:text,clickF:clickFunciton}
 this.menuItems[tindex]=menu;
}

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

 if(this.parentMenu==null)
  this.menuBody.show(event.clientX-1,event.clientY,this.menuWidth,rowCount*25,document.body);
 else
  this.menuBody.show(this.parentMenu.menuWidth,25*this.parentIndex,this.menuWidth,rowCount*25,this.parentMenu.menuBody.document.body);

 

}

//创建菜单
PopMenu.prototype.createMenuBody=function()
{
 if(this.parentMenu!=null)
  this.menuBody=this.parentMenu.menuBody.document.parentWindow.createPopup();
 else
  this.menuBody=window.createPopup();
  
 
 this.menuBody.document.createStyleSheet(this.cssFile);
 
 this.menuTable=createTable(this.menuBody.document,this.menuClass);
    this.menuBody.document.oncontextmenu=function()
    {

            return false;

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

    {
   clearSelMenu(mt);
   var mtp=mt.parentMenu;
   while(mtp!=null)
   {
    mtp.menuBody.hide();
    mtp=mtp.parentMenu    
   }
            pop.hide();
   

    }

}

PopMenu.prototype.createMenuItem=function()
{

 for(var i=0;i<this.menuItems.length;i++)
 {
  var itemM=this.menuItems[i];
  var t=this.menuBody.document.createElement("tr");
  var td=this.menuBody.document.createElement('td');
  td.className=this.nomalClass;
  td.innerText=itemM.text;

  var pop=this;
  var hc=this.hotClass;
  td.id=i;

  td.onmouseover=function()
  {
         this.className=pop.hotClass;
           
   //显示子菜单
    if(pop.hotChild!=null) pop.hotChild.hide();
    for(var j=0;j<pop.childMenus.length;j++)
    {
    
     if(pop.childMenus[j].parentIndex==this.id)
     {
      window.status=this.id;

      pop.childMenus[j].showMenu();//显示子菜单
      pop.hotChild=pop.childMenus[j];
      return;
     
     }
    }

  } 
     var pop2=this;

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

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

}
//菜单隐藏
PopMenu.prototype.hide=function()
{
 this.menuBody.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(3,100);//参数:子菜单父亲的index（用于定位),菜单宽度
 var a4='childmenuclick';
 var a5=10;
 childMenu.addMenuItem('test4--1',function(){childmenuClick(a4,a5)},null)
 childMenu.addMenuItem('test4--2',null,null)

  
  //创建第二级菜单
 var childMenu=popMenu.createChildMenu(2,100);//参数:子菜单父亲的index（用于定位),菜单宽度
 var a4='childmenuclick';
 var a5=10;
 childMenu.addMenuItem('test3--1  >>',null,null)//
 childMenu.addMenuItem('test3--2  >>',null,null)

 
 var ddMenu1=childMenu.createChildMenu(0,100);
 ddMenu1.addMenuItem('test3--1--1',function(){childmenuClick(a4,a5)},null)
 ddMenu1.addMenuItem('test3--1--2',function(){childmenuClick(a4,a5)},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>