网上已经有很多实现右键菜单的文章,本菜单也是在参考网上的经验之后写成。如有好的意见和建议欢迎留言
本菜单的特点:
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.οncοntextmenu=function()
{
return false;
}
var pop=this.menuBody;
var mt=this;
this.menuBody.document.οnclick=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.οncοntextmenu=function()
{
return false;
}
var pop=this.menuBody;
var mt=this;
this.menuBody.document.οnclick=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.οnmοuseοver=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.οnmοuseοut=function()
{
this.className=pop2.nomalClass;
}
t.appendChild(td);
if(itemM.clickF!=null) t.οnclick=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()" οncοntextmenu="showMenu(); return false;" >
</body>
</html>