Javascript Context Menu

<!--
This js file can help you to generate context menu with exist functions and guides...
-->
1.Javascript related
2.Div related
3.Hypher related
4.CSS related
5.Other

//Javascript related
    
        var display_url=0;//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
        var ie5=null;
        var ns6=null;
        var menuObj1=null;
        var menuObj2=null;
        var menuobj=null;//Store the menuObj1 or menuObj2 for later function work
        var globalID="";       
       
       
        ie5=document.all&&document.getElementById;    
      ns6=document.getElementById&&!document.all;
    
    
       
        //Here the function showMenu has two parameters and make the more control(such as multiple menu select) available
        function showMenu(ID,which)
        {
            if (ie5||ns6)
            {
             menuObj1=document.getElementById("menu1");
             menuObj2=document.getElementById("menu2");
         }
         if (ie5||ns6||ie5All||ns6All)
         {
          globalID=ID;
          if(which=='1')
          {
              menuObj2.style.display='none'
              menuObj1.style.display=''
              menuobj = menuObj1;
          }
          else
          {
              menuObj1.style.display='none';
              menuObj2.style.display='';
              menuobj=menuObj2;
          }
          //document.οncοntextmenu=showmenuie5
          menuLocate();
          document.οnclick=hideMenu
         }
        }
       
        function menuLocate(e)
        {
         //Find out how close the mouse is to the corner of the window
         rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
         bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

         //if the horizontal distance isn't enough to accomodate the width of the context menu
         if (rightedge<menuobj.offsetWidth)
         //move the horizontal position of the menu to the left by it's width
         menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
         else
         //position the horizontal position of the menu where the mouse was clicked
         menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

         //same concept with the vertical position
         if (bottomedge<menuobj.offsetHeight)
         menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
         else
         menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

         menuobj.style.visibility="visible"
         return false
        }
       
        function highLight(e)
        {
         firingobj=ie5? event.srcElement : e.target
         if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
          if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
          firingobj.style.backgroundColor="highlight"
          firingobj.style.color="white"
          if (display_url==1) window.status=event.srcElement.url
         }
        }
       
        function lowLight(e)
        {
         firingobj=ie5? event.srcElement : e.target
         if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
          if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
          firingobj.style.backgroundColor=""
          firingobj.style.color="black"
          window.status=''
         }
        }
       
        function linkTo(e){
         firingobj=ie5? event.srcElement : e.target
         if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
          if (ns6&&firingobj.parentNode.className=="menuitems"){firingobj=firingobj.parentNode}
          url = firingobj.getAttribute("url");
          url += globalID;
          target = firingobj.getAttribute("target");
          //alert(url);
          if (target ==  "NEW")
          {window.open(url,'','height=300,width=620','top=-280','left=280',target);}
          else if (target == "leftFrame")
          {parent.parent.leftFrame.location=url;}
          else
          {window.location=url;}
         }
        }
       
        function hideMenu(e)
        {
         menuobj.style.visibility="hidden"
        }    

</script>

//Div related(Contextmenu content)
<!--   You can use this example the create you context menu and show it by functions listed above
    <div id="menu1" class="skin1" οnmοuseοver="highLight(event)" οnmοuseοut="lowLight(event)" οnclick="linkTo(event)" style="display:none">
        <div class="menuitems" url="http://www.sohu.com/" >Sohu</div>
        <div class="menuitems" url="http://www.sina.com/" >Sina</div>
        <div class="menuitems" url="http://www.163.com/" target="NEW">163</div>       
    </div>
-->

 

//Hypher script showMenu(?,?) related
You shoud make a hypher link, such as:
...
TreeNode tn = new TreeNode();
tn.Text =  "<span style=/"Font-Size='8pt';ForeColor='Black';HorizontalPadding='5px'; NodeSpacing='0px';VerticalPadding='0px';/"><a οncοntextmenu=/"showMenu('"+parameter1+"','"+parameter2+"');return false;/" href=/"#/">"+Link text+"</a></span>";
...

 

//CSS related
Here is content of Menu.css File:

/* Context menu Script- ? Dynamic Drive (www.dynamicdrive.com) Last updated: 01/08/22
For full source code and Terms Of Use, visit http://www.dynamicdrive.com */

.skin0{
position:absolute;
width:80px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}

.skin1{
position:absolute;
width:60px;
border:1px solid #0054BC;
background-color:#A1C1E9;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:11px;
z-index:100;
visibility:hidden;
}

.skin2{
position:absolute;
width:170px;
border:1px solid #0054BC;
background-color:#A1C1E9;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:11px;
z-index:100;
visibility:hidden;
}

.menuitems{
padding-left:5px;
padding-right:5px;
}

 

//Other
You should configure something in htm/html File and make .js & .css work with you,for example:
...
<title>无标题页</title>
    <link rel="stylesheet" type="text/css" href="Menu.css" />
...
<title>外勤人员信息</title>
<SCRIPT language="JavaScript" SRC="Menu.js"></SCRIPT>
...