原创－无限个右键菜单-控件新闻-慧都网

原创－无限个右键菜单

翻译|其它|编辑：郝浩|2004-08-03 09:23:00.000|阅读 1710 次

概述：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>右键菜单</title>
<style type="text/css">
.ibox {
border-top:window 1px solid;
border-left:window 1px solid;
border-bottom:buttonshadow 1px solid;
border-right:buttonshadow 1px solid;
background-color:buttonface;
cursor:default;
font-size:12px;
line-height:80px;
width:150;
text-align: center;
}
</style>

<script type="text/javascript">
var popupmenuList=new Array(); //全部弹出菜单列表

//弹出菜单类定义
function popupmenu() {
popupmenuList[popupmenuList.length]=this; //登记弹出菜单

var MENUITEM_HEIGHT = 17;     //菜单项高度
var MENUITEM_FONTSIZE = "12px"; //菜单项文字大小

//类变量
this.id="popupMenu_1";   //识别号,若页面中有多个变量则需改成不同名字   //少用
this.width=120;       //菜单整体宽度 (含logo的宽度)        //常用
this.logo=new function() { //菜单logo类                //
  this.src="";       //logo图片(不指定表示没有logo)        //常用
  this.bgcolor="#8eb2e9"; //logo背景色(浅蓝色)            //
  this.width=0;       //强制指定logo宽度(=0表示以图片实际宽度为准) //
  this.height=0;      //强制指定logo高度(=0表示以图片实际高度为准) //
}
this.item=new Array();   //菜单变量列表
this.object=null;      //菜单实体
this.ctl=document.body;   //控制对象

//类方法
//显示菜单
this.show=function() {
  if (this.object) this.object.style.visibility="visible";
}

//隐藏菜单
this.hide=function() {
  if (this.object) this.object.style.visibility="hidden";
}

//添加菜单
this.add=function(text,action,image) {                //一定要用
  var menu=new function() { //定义菜单项类
   this.text=text;      //菜单项文字("-"表示该项为分隔线)     //必须设置
   this.action=action;    //点击菜单后执行的动作          //必须设置
   this.image=image;     //菜单项图片(16x16)           //
   this.level=0;       //表示菜单深度,目前只支持1层^o^      //仅程序用
  }
  this.item[this.item.length]=menu;
  return menu;
}

//生成菜单代码
this.print=function() {
  var LOGOWIDTH, LOGOHEIGHT;                //logo宽度&高度
  var MENUWIDTH, MENUHEIGHT;                //菜单区宽度&高度

  if (this.logo.src!="") {                 //logo宽度&高度
   var vlogo=new Image;
   vlogo.src=this.logo.src;
   if (this.logo.width==0) LOGOWIDTH=vlogo.width;
   if (this.logo.height==0) LOGOHEIGHT=vlogo.height;
  } else {
   LOGOWIDTH=this.logo.width;
   LOGOHEIGHT=this.logo.height;
  }

  MENUWIDTH=this.width-2-LOGOWIDTH;            //菜单区宽度
  MENUHEIGHT=2*1;                     //菜单区高度, 1为菜单项与内侧边框的距离
  for (var i=0; i<this.item.length; i++) {
   if (this.item[i].text!="-")
    MENUHEIGHT+=MENUITEM_HEIGHT;
   else
    MENUHEIGHT+=10;
  }
  MENUHEIGHT=Math.max(MENUHEIGHT,LOGOHEIGHT);

  //生成菜单边框
  var out="<div id="+this.id+" style=\""+
      "cursor:default; "+               //光标
      "border-top:buttonface 1px solid; "+       //描外侧边-上
      "border-left:buttonface 1px solid; "+      //描外侧边-左
      "border-bottom:threeddarkshadow 1px solid; "+  //描外侧边-下
      "border-right:threeddarkshadow 1px solid; "+   //描外侧边-右
      "position:absolute; "+
      "width:"+this.width+"; "+            //整体宽度
      "height:"+(MENUHEIGHT+2)+"; "+          //整体高度
      "visibility:hidden; "+              //隐藏
      "z-index:9;\">\n"+
      "<table border=0 cellpadding=0 cellspacing=0 width="+(this.width-2)+" height="+MENUHEIGHT+" style=\""+
      "border-top:window 1px solid; "+         //描内侧边-上
      "border-left:window 1px solid; "+        //描内侧边-左
      "border-bottom:buttonshadow 1px solid; "+    //描内侧边-下
      "border-right:buttonshadow 1px solid;\">\n\<tr>\n"; //描内侧边-右

  //生成logo
  if (LOGOWIDTH > 0) {
   out+="<td bgcolor=\""+this.logo.bgcolor+"\" width="+LOGOWIDTH+" valign=bottom>\n"+
      "<img id="+this.id+"logo src=\""+this.logo.src+"\" width="+LOGOWIDTH+" height="+LOGOHEIGHT+">\n</td>\n";
  }

  //生成菜单项
  out += "<td bgcolor=buttonface align=center valign=middle>\n<table border=0 cellpadding=0 cellspacing=0>\n";
  for (var i=0; i<this.item.length; i++) {
   var imenu = this.item[i];
   if (imenu.text!="-") {                 //正常的菜单项
    out+="<tr>\n<td valign=middle>\n"+
       "<table border=0 cellpadding=0 cellspacing=0 width="+(MENUWIDTH-4)+" class=popupitem onclick=\""+imenu.action+"\" "+
       "onmouseover=\"this.className='popupitemhigh'\" onmouseout=\"this.className='popupitem'\">\n"+
       "<tr valign=middle>\n<td width=18 align=center>\n";
    if (typeof(imenu.image)!="undefined" && imenu.image != "") { //菜单图片
     out+="<img src=\""+imenu.image+"\" height=16 width=16>";
    }
    out+="</td>\n<td valign=middle>"+imenu.text+"</td>\n"; //菜单文字
    out+="</tr>\n</table>\n</td></tr>\n";
   } else {                        //分隔线
    out+="<tr>\n<td valign=middle align=center height=8>\n"+
       "<table border=0 cellpadding=0 cellspacing=0 width="+(MENUWIDTH-4)+">"+
       "<tr><td height=1 bgcolor=buttonshadow></td></tr>"+
       "<tr><td height=1 bgcolor=buttonhighlight></td></tr>"+
       "</table>\n</td>\n</tr>\n";
   }
  }
  out+="</table>\n</td>\n</tr>\n</table>\n</div>\n";

  if (popupmenuList.length==1) {              //生成脚本(只需写一次)
   var js="<style type=\"text/css\">\n"+
       ".popupitem {\n"+
       " font-size: "+MENUITEM_FONTSIZE+"; "+     //菜单项字体大小
       " line-height: "+MENUITEM_HEIGHT+"px; "+    //菜单项高度
       " background-color:buttonface;\n"+
       " color:buttontext;\n"+
       "}\n"+
       ".popupitemhigh {\n"+
       " font-size: "+MENUITEM_FONTSIZE+"; "+     //菜单项字体大小
       " line-height: "+MENUITEM_HEIGHT+"px; "+    //菜单项高度
       " background-color:highlight;\n"+
       " color:highlighttext;\n"+
       "}\n"+
       "</style>\n";
   document.write(js);
   document.body.onclick=new Function("hidepopupmenu(); return false;");
   document.body.onscroll=new Function("hidepopupmenu(); return false;");
   document.body.onselectstart=new Function("hidepopupmenu(); return false;");
   window.onresizestart=new Function("hidepopupmenu(); return false;");
  }

  document.write(out);
  this.object=document.all(this.id);
  this.ctl.oncontextmenu=new Function("return showpopupmenu('"+this.id+"');");
}
}

function hidepopupmenu() {
for (var i=0; i<popupmenuList.length; i++) {
  popupmenuList[i].hide();
}
}

function showpopupmenu(menuid) {
hidepopupmenu();

var popupmenu=document.all(menuid);

if (event.srcElement.tagName=="IMG"&&event.srcElement.id!=(this.id+"logo")||
    event.srcElement.tagName=="A"||
    event.srcElement.tagName=="TEXTAREA"||
     event.srcElement.tagName=="INPUT"||
     document.selection.type!="None") {
  return true;
} else {
  popupmenu.style.left=event.clientX+document.body.scrollLeft;
  popupmenu.style.top=event.clientY+document.body.scrollTop;

  popupmenu.style.visibility='visible';
}

return false;
}
</script>

</head>
<body>
<div class="ibox" id="pop1" valign=middle>第一个菜单</div>
<div class="ibox" id="pop2" valign=middle>第二个菜单</div>
<pre>本右键菜单已包装为对象，针对控件可定制多个菜单。希望需要的的朋友喜欢：）</pre>
<script>
var popmenu = new popupmenu();
popmenu.logo.src="menu.gif";
popmenu.width=150;
popmenu.ctl=pop1;
popmenu.add("后退","window.history.back()");
popmenu.add("前进","window.history.forward()");
popmenu.add("-");
popmenu.add("返回讨论版","alert('空');");
popmenu.add("作者相关文章","alert('空');");
popmenu.add("作者全部文章","alert('空');");
popmenu.add("-");
popmenu.add("全选","document.execCommand('SelectAll')");
popmenu.add("另存为…","document.execCommand('SaveAs','true')");
popmenu.add("查看源文件","location.replace('view-source:'+location.href)");
popmenu.add("打印","window.print()");
popmenu.add("刷新","window.location.reload()");
popmenu.print();

var popmenu = new popupmenu();
popmenu.id="popupMenu_2";
popmenu.logo.src="menu2.gif";
popmenu.width=120;
popmenu.logo.bgcolor="#3366cc";
popmenu.ctl=pop2;
popmenu.add("网络收藏夹","","1.gif");
popmenu.add("QQ贺卡站","","2.gif");
popmenu.add("好友分组","","3.gif");
popmenu.add("-");
popmenu.add("档案管理","","4.gif");
popmenu.add("备忘录管理","","5.gif");
popmenu.print();
</script>
</body>
</html>