asp.net的treeview右键菜单Context Menus on the TReeView - IE Specific

原文网址：http://blogs.msdn.com/b/jdixon/archive/2006/01/05/509700.aspx

A few ASP.NET 2.0 TreeView coders were asking for a how to have context menus - per node - on the TreeView control. Well I spent a small amount of time on this and wanted to post one solution. A few caveats:

a. IE Specific
b. I never optimized the javascript to use parameters

Hope this helps soeone achieve what they need. If you find a better solution please feel free to let me know!

 

 

<% @ Page Language ="C#" %>

< html >
< head >
     < style >
    <! --
         .skin1 {
             cursor : default ;
             font : menutext ;
             position : absolute ;
             text-align : left ;
             font-family : Arial, Helvetica, sans-serif ;
             font-size : 10pt ;
             width : 120px ;
             background-color : menu ;
             border : 1 solid buttonface ;
             visibility : hidden ;
             border : 2 outset buttonhighlight ;
        }
         .menuitems {
             padding-left : 15px ;
             padding-right : 10px ;
    }
     -->
     </ style >

     < script type ="text/javascript">

<!-- Begin
var menuskin = "skin1" ;
var display_url = 1; // Show URLs in status bar?
function showmenuie5() {
     if ( event .srcElement.type != undefined)
    {
             var s  = event .srcElement.id;
             var ind = s.replace( "TreeView1t" , "" );
            s = s.replace( "TreeView1t" , "TreeView1n" );

            document.getElementById( 'one' ).url = event .srcElement.href;
            document.getElementById( 'one' ).innerText = "Select" ;
             var ch = document.getElementById(s);
             if (ch != null ){
                document.getElementById( 'two' ).url = "javascript:TreeView_ToggleNode(TreeView1_Data," + ind + "," + s + ",' '," + s + "Nodes)" ;    
                document.getElementById( 'two' ).innerText = "Expand//Collapse" ;
            }
             else         
                document.getElementById( 'two' ).outerHTML= "<div id=two class=menuitems url=''></div>"


             var rightedge = document.body.clientWidth- event .clientX;
             var bottomedge = document.body.clientHeight- event .clientY;
             if (rightedge < ie5menu.offsetWidth)
                ie5menu.style.left = document.body.scrollLeft + event .clientX - ie5menu.offsetWidth;
             else
                ie5menu.style.left = document.body.scrollLeft + event .clientX;
             if (bottomedge < ie5menu.offsetHeight)
                ie5menu.style.top = document.body.scrollTop + event .clientY - ie5menu.offsetHeight;
             else
                ie5menu.style.top = document.body.scrollTop + event .clientY;
                ie5menu.style.visibility = "visible" ;
                }
                 else
                {
                   ie5menu.style.visibility = "hidden" ;
                }
             return false ;
    }
     function hidemenuie5() {
        ie5menu.style.visibility = "hidden" ;
    }
     function highlightie5() {
         if ( event .srcElement.className == "menuitems" ) {
             event .srcElement.style.backgroundColor = "highlight" ;
             event .srcElement.style.color = "white" ;
         if (display_url)
            window.status = event .srcElement.url;
        }
    }
     function lowlightie5() {
         if ( event .srcElement.className == "menuitems" ) {
             event .srcElement.style.backgroundColor = "" ;
             event .srcElement.style.color = "black" ;
            window.status = "" ;
        }
    }
     function jumptoie5() {
         if ( event .srcElement.className == "menuitems" ) {
             if ( event .srcElement.getAttribute( "target" ) != null )
                window.open( event .srcElement.url, event .srcElement.getAttribute( "target" ));
             else
                window.location = event .srcElement.url;
        }
    }
//  End -->
     </ script >

</ head >
< body >
     < form id ="form1" runat ="server">
         < div id ="ie5menu" class ="skin0" onmouseover ="highlightie5()" onmouseout ="lowlightie5()"
             onclick ="jumptoie5();">
             < div id ="one" class ="menuitems" url ="">
             </ div >
             < div id ="two" class ="menuitems" url ="">
             </ div >
         </ div >
         < asp : TreeView ID ="TreeView1" runat ="server">
             < Nodes >
                 < asp : TreeNode Text ="a" Value ="a">
                     < asp : TreeNode Text ="b" Value ="b">
                         < asp : TreeNode Text ="c" Value ="c"></ asp : TreeNode >
                     </ asp : TreeNode >
                 </ asp : TreeNode >
                 < asp : TreeNode Text ="cc" Value ="cc">
                     < asp : TreeNode Text ="ccc" Value ="ccc">
                         < asp : TreeNode Text ="cccc" Value ="cccc"></ asp : TreeNode >
                     </ asp : TreeNode >
                 </ asp : TreeNode >
             </ Nodes >
             < SelectedNodeStyle BackColor ="#C00000" />
         </ asp : TreeView >
     </ form >

     < script type ="text/javascript">
      if (document.all) {
          ie5menu.className = menuskin;
          document.getElementById( 'TreeView1' ).oncontextmenu = showmenuie5;
          document.body.onclick = hidemenuie5;
      }
     </ script >
</ body >
</ html >