WEB 简单的右键菜单

最近项目中有个模块用到了右键菜单，就自己写了一个简单的，

现在拿来出来给分享一下，希望对大伙有个帮助，

同时也希望大Ｎ们发表一下自己的想法，或别的高招。。。

话不多说先来看一下应用的效果先：

TreeView上的应用效果


表格上面的应用



源码使用了(Singleton模式),代码如下：

/*

说明:treeview 右键菜单
模式:Singleton(单键)
创建人:winken
创建时间:080124
使用:
*/
function WinKenTreeMenu()
{
    if ( this.constructor.instance )
         return this.constructor.instance;
    else this.constructor.instance = this;
  
   this.htmlHtml="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"150px\" >"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"ShowOpeater(this.parentNode,0)\"><td  class=\"cls_TreeMenu_imgbg\" style=\"background-image: url(../images/Treemenu_Add.gif)\">&nbsp;</td><td>新建文件夹</td></tr>"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"ShowOpeater(this.parentNode,2)\"><td class=\"cls_TreeMenu_imgbg\" style=\"background-image: url(../images/Treemenu_fileup.gif)\">&nbsp;</td><td>上传文件</td></tr>"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"ShowOpeater(this.parentNode,9)\"><td class=\"cls_TreeMenu_imgbg\" style=\"background-image: url(../images/Treemenu_download.gif)\">&nbsp;</td><td>打包下载</td></tr>"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"ShowOpeater(this.parentNode,4)\"><td class=\"cls_TreeMenu_imgbg\" style=\"background-image: url(../images/Treemenu_delete.gif)\">&nbsp;</td><td>删除</td></tr>"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"ShowOpeater(this.parentNode,1)\" ><td class=\"cls_TreeMenu_imgbg\" style=\"background-image: url(../images/Treemenu_rename.gif)\">&nbsp;</td><td>重命名</td></tr>"
    +"<tr onmouseover=\"this.className='cls_Treemenu_mouseover'\" onmouseout=\"this.className=''\" onclick=\"new WinKenTreeMenu().Hide()\" title=\"关闭当前菜单\"><td class=\"cls_TreeMenu_imgbg\">&nbsp;</td><td align=\"right\">关 闭&nbsp;&nbsp;</td></tr>"
    +"</table>";
   this.contrainer=null;
   this.parentNode=null;
};

WinKenTreeMenu.prototype.Show = function(obj)
{
 this.Hide();
 this.parentNode=obj;
    this.contrainer=document.createElement("div");
 this.contrainer.clssName="cls_TreeMenu_div";
 this.contrainer.innerHTML=this.htmlHtml;
 this.contrainer.style.ZIndex=999;
 this.contrainer.style.left=parseInt(event.x)+10+"px";
 this.contrainer.style.top=parseInt(event.y)+"px";
 this.contrainer.style.position="absolute";
 this.contrainer.style.display="block";
 this.contrainer.style.backgroundColor="#FFFFFF";
 this.contrainer.style.border="1px solid #6699CC";
 this.contrainer.style.cursor="hand";
 this.contrainer.id="WinKenMenu";
 document.body.appendChild(this.contrainer);
};
WinKenTreeMenu.prototype.Hide=function()
{
 var obj=document.getElementById("WinKenMenu");
 if(obj)
  document.body.removeChild(obj); 
};

使用示例：
在treeview中使用
<iewc:treeview oncontextmenu=Fun_OncontextMenu(this); id=tv_FolderList EnableViewState="False" SelectExpands="True" SystemImagesPath="/webctrl_client/1_0/treeimages/" HEIGHT="300px" runat="server">&nbsp;<iewc:TreeNode id="tv_0" nodedata="0000" imageurl="../images/folderclose.gif" text="系统目录" expanded="True" expandedimageurl="../images/folderopen.gif"></iewc:TreeNode></iewc:treeview>

function Fun_FolderMenu(obj)
{
window.event.returnValue=0;　//这一句要注意了，没加上这个会出不来
 new WinKenFolderMenu().Show(null); //
}

如果要关闭菜单也比较简单
因为用到了单键模式可以使用以下简单的处理即可
new WinKenTreeMenu().Hide();

东西比较简单，也不多说了，
如果有什么不好或是不对的地方希望大伙能提出来　
网络不是很好，也没怎么排版，有点乱。。。
不早了休息一下