1. 当鼠标悬浮到控件对象上, 右击, 会弹出此自定义控件.
2. 仅当控件支持oncontextmenu事

结合GridView使用的自定义控件,App_code/data.cs文件为数据生成文件PopupMenu_InGridView为演示文件夹、TraceMenu为自定义组建源码

自定义控件核心代码:

using System;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TraceMenu
{
    [DefaultProperty(
"TargetControl")]
    [ToolboxData(
"<{0}:PopupTraceMenu runat=server></{0}:PopupTraceMenu>")]
    
//[Designer(typeof(System.ComponentModel.Design.DesignerCollection))]
    public class PopupTraceMenu : Control, IComponent
    {

        [Bindable(
true)]
        [Category(
"Appearance")]
        [DefaultValue(
"[PopupTraceMenu \"PopupTraceMenu11\"]")]
        [Localizable(
true)]
        
public string Text
        {
            
get
            {
                String s 
= (String)ViewState["Text"];
                
return ((s == null? String.Empty : s);
            }

            
set
            {
                ViewState[
"Text"= value;
            }
        }

        [Bindable(
true)]
        [Category(
"Appearance")]
        [DefaultValue(
"")]
        [Description(
"设置此控件的寄主控件")]
        [TypeConverter(
typeof(ControlIDConverter))] 
        
public string TargetControl
        {
            
get
            {
                String s 
= (String)ViewState["TargetControl"];
                
return ((s == null? String.Empty : s);                                                
            }
            
set
            {
                ViewState[
"TargetControl"= value;
            }
        }

        
protected override void Render(HtmlTextWriter writer)
        {
            
if (DesignMode)
            {
                
this.Controls.Clear();                
                LiteralControl lc 
= new LiteralControl();
                lc.Text 
= this.Text;                
                
this.Controls.Add(lc);                
            }
            
base.Render(writer);            
        }

        
protected override void CreateChildControls()
        {            
            
base.CreateChildControls();
        }

        
protected override void OnPreRender(EventArgs e)
        {

            
if (!Page.ClientScript.IsClientScriptBlockRegistered("BuildMenu"))
            {
                Page.ClientScript.RegisterClientScriptBlock(
this.GetType(), "BuildMenu",
                    
"<script type='text/javascript' src='JScript.js'></script>");
            }

            Control targetControl 
= this.FindControl(TargetControl);

            StringBuilder strInitScript 
= new StringBuilder();
            
if (targetControl != null)
            {                
                strInitScript.Append(
"<script text/javascript> ");
                strInitScript.Append(
"   writeStyle(); makeMenu(); ");
                strInitScript.Append(
"   if( document.all&&window.print ) ");
                strInitScript.Append(
"   { ");
                strInitScript.Append(
"      var objClientId = '" + targetControl.ClientID + "';");
                strInitScript.Append(
"      if(objClientId != null) ");
                strInitScript.Append(
"      {");
                strInitScript.Append(
"         var obj = document.getElementById(objClientId);");
                strInitScript.Append(
"         document.onclick = hideMenu; ");
                strInitScript.Append(
"         obj.oncontextmenu = showMenu;");
                strInitScript.Append(
"      }");
                strInitScript.Append(
"      else {alert('Please Set TargetControl Property!')}");
                strInitScript.Append(
"   } ");
                strInitScript.Append(
"</script>");
            }
            
else
            {
                strInitScript.Append(
"<script text/javascript> ");
                strInitScript.Append(
"   alert('Please Set TargetControl Property!'); ");
                strInitScript.Append(
"</script>");
            }
            
if (!Page.ClientScript.IsStartupScriptRegistered("InitScript"))
            {
                Page.ClientScript.RegisterStartupScript(
this.GetType(), "InitScript",
                    strInitScript.ToString());
            }
           
            
base.OnPreRender(e);
        }        
    }
}

涉及的Js代码:
function contextMenu()
{
 
this.items   = new Array();
 
 
this.addItem = function (item)
 {
  
this.items[this.items.length] = item;
 }

 
this.show = function (oDoc)
 {
  
var strShow = "";
  
var i;
  
  strShow 
= "<div id=\"rightmenu\" style=\"BACKGROUND-COLOR: #6699ff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10\">";
  strShow 
+= "<table border=\"0\" height=\"";
  strShow += this.items.length * 20;
  strShow += 
"\" cellpadding=\"0\" cellspacing=\"0\">";
  
  strShow 
+= "<tr height=\"3\"><td bgcolor=\"#d0d0ce\" width=\"2\"></td><td>";
  
//strShow += "<tr height=\"3\"><td bgcolor=\"#6699ff\" width=\"2\"></td><td>";
  
 strShow 
+= "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
// strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#6699ff\">";

  strShow 
+= "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
//strShow += "<tr><td bgcolor=\"#000000\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";

  strShow 
+= "</td><td width=\"2\"></td></tr>";
  
  strShow 
+= "<tr><td bgcolor=\"#d0d0ce\"></td><td>";
//  strShow += "<tr><td bgcolor=\"#6699ff\"></td><td>";
  
  strShow 
+= "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#ffffff\">";
//strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#000000\">";
  
  oDoc.write(strShow);
  
for(i=0; i<this.items.length; i++)
  {
   
this.items[i].show(oDoc);
  }
  strShow 
= "</table></td><td></td></tr>";
  
  strShow 
+= "<tr height=\"3\"><td bgcolor=\"#d0d0ce\"></td><td>";
 
// strShow += "<tr height=\"3\"><td bgcolor=\"#000000\"></td><td>";
  
  strShow 
+= "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
//  strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#6699ff\">";
  
  strShow 
+= "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
//strShow += "<tr><td bgcolor=\"#6699ff\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";

  strShow 
+= "</td><td></td></tr>";
  strShow 
+= "</table></div>\n";
  oDoc.write(strShow);
 }
}

// menu Item object
function contextItem(text, icon, cmd, type)
{
 
this.text = text ? text : "";
 
this.icon = icon ? icon : "";
 
this.cmd = cmd ? cmd : "";
 
this.type = type ? type : "menu";
 
 
this.show = function (oDoc)
 {
  
var strShow = "";
  
  
if(this.type == "menu")
  {
   strShow 
+= "<tr ";
   strShow 
+= "onmouseover=\"changeStyle(this, 'on');\" ";
   strShow 
+= "onmouseout=\"changeStyle(this, 'out');\" ";
   strShow 
+= "onclick=\"";
   strShow += this.cmd;
   strShow += 
"\">";
   strShow 
+= "<td class=\"ltdexit\" width=\"16\">";
   
if (this.icon == "")
    strShow 
+= "&nbsp;";
   
else {
    strShow 
+= "<img border=\"0\" src=\"";
    strShow += this.icon;
    strShow += 
"\" width=\"16\" height=\"16\" style=\"POSITION: relative\"></img>";
   }
   strShow 
+= "</td><td class=\"mtdexit\">";
   strShow 
+= this.text;
   strShow 
+= "</td><td class=\"rtdexit\" width=\"5\">&nbsp;</td></tr>";
  }
  
else if (this.type == "separator")
  {
   strShow 
+= "<tr><td class=\"ltdexit\">&nbsp;</td>";
   strShow 
+= "<td class=\"mtdexit\" colspan=\"2\"><hr color=\"#000000\" size=\"1\"></td></tr>";
  }
  
  oDoc.write(strShow);
 }
}

function changeStyle(obj, cmd)

 
if(obj) try {
  
var imgObj = obj.children(0).children(0);
  
  
if(cmd == 'on') {
   obj.children(
0).className = "ltdfocus";
   obj.children(
1).className = "mtdfocus";
   obj.children(
2).className = "rtdfocus";
   
if(imgObj)
   {
    
if(imgObj.tagName.toUpperCase() == "IMG")
    {
     imgObj.style.left 
= "-1px";
     imgObj.style.top 
= "-1px";
    }
   }
  }
  
else if(cmd == 'out') {
   obj.children(
0).className = "ltdexit";
   obj.children(
1).className = "mtdexit";
   obj.children(
2).className = "rtdexit";
   
if(imgObj)
   {
    
if(imgObj.tagName.toUpperCase() == "IMG")
    {
     imgObj.style.left 
= "0px";
     imgObj.style.top 
= "0px";
    }
   }
  }
 }
 
catch (e) {}
}

function showMenu()
{
 
var x, y, w, h, ox, oy;
 
 x 
= event.clientX;
 y 
= event.clientY;
 
 
var obj = document.getElementById("rightmenu");
 
if (obj == null)
  
return true;

//ox = document.body.clientWidth;
//
 oy = document.body.clientHeight;
//
 if(x > ox || y > oy)
//
  return false;
//
 w = obj.offsetWidth;
//
 h = obj.offsetHeight;
//
 if((x + w) > ox)
//
   x = x - w;
//
 if((y + h) > oy)
//
  y = y - h;
 
 obj.style.posLeft 
= x + getScrollLeft(); //document.body.scrollLeft;
 obj.style.posTop = y + getScrollTop();
 obj.style.visibility 
= "visible";
 
 
return false;
}

function getScrollTop()
{
    
var ScrollTop;
    
if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
       ScrollTop 
= document.documentElement.scrollTop;
    }
    
else if (typeof document.body != 'undefined') {
       ScrollTop 
= document.body.scrollTop;
    }
    
return ScrollTop;


function getScrollLeft()
{
    
var ScrollLeft;
    
if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
       ScrollLeft 
= document.documentElement.scrollLeft;
    }
    
else if (typeof document.body != 'undefined') {
       ScrollLeft 
= document.body.scrollLeft;
    }
    
return ScrollLeft;
}



function hideMenu()
{
 
if(event.button == 0)
 {
  
var obj = document.getElementById("rightmenu");
  
if (obj == null)
   
return true;
  obj.style.visibility 
= "hidden";
  obj.style.posLeft 
= 0;
  obj.style.posTop 
= 0;
 }
}

function writeStyle()
{
 
var strStyle = "";
 
 strStyle 
+= "<STYLE type=text/css>";
 strStyle 
+= "TABLE {Font-FAMILY: \"Tahoma\",\"Verdana\",\"宋体\"; FONT-SIZE: 9pt}";
 strStyle 
+= ".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}";
 strStyle 
+= ".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}";
 strStyle 
+= ".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}";
 strStyle 
+= ".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}";
 strStyle 
+= ".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}";
 strStyle 
+= ".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}";
 strStyle 
+= "</STYLE>";
 
 document.write(strStyle);
}

function makeMenu()
{
 
var myMenu, item;
 
 
var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.xframe.com.cn/'); return false;";
 
var favorate_cmd = "window.external.addFavorite('http://www.xframe.com.cn/','XFRAME'); return false;";
 
var viewcode_cmd = "window.location = 'view-source:' + window.location.href";
 
 myMenu 
= new contextMenu();
 
 item 
= new contextItem("返回主页""Images/returnhome.gif""top.location='http://www.baidu.com.cn/';""menu");
 myMenu.addItem(item);
 
 item 
= new contextItem("设为主页""Images/home.gif", homepage_cmd, "menu");
 myMenu.addItem(item);
 
 item 
= new contextItem("添加到收藏夹""Images/favadd.gif", favorate_cmd, "menu");
 myMenu.addItem(item);
 
 item 
= new contextItem("""""""separator");
 myMenu.addItem(item);
 
 item 
= new contextItem("联系作者""Images/mail.gif""location.href='mailto:xxxxxx@xxxxxx.com'""menu");
 myMenu.addItem(item); 
 
 item 
= new contextItem("察看源码""Images/edit.gif", viewcode_cmd, "menu");
 myMenu.addItem(item);
 
 item 
= new contextItem("自定义功能""Images/XFRAME.gif", viewcode_cmd, "menu");
 myMenu.addItem(item);
 
 myMenu.show(
this.document);

 
delete item;
 
delete myMenu;
}

function toggleMenu(isEnable)
{
 
if(isEnable)
  document.oncontextmenu 
= showMenu;
 
else
  document.oncontextmenu 
= new function() {return true;};
}

调用代码1:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="TraceMenu" Namespace="TraceMenu" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>Memory Xframe Company</title>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<table cellpadding="0" cellspacing="0" border="1" bordercolor=black>
            
<tr>
               
<td>
                   
<img id="img1" src="Images/Xframe.jpg" runat="server" />
               
</td>
            
</tr>
        
</table>    
        
        
<br />
        
<br />
        
<cc1:popuptracemenu id="PopupTraceMenu1" runat="server" TargetControl="img1"></cc1:popuptracemenu>        
    
</div>
    
</form>
</body>
</html>

调用代码2:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace
="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
    Namespace
="CrystalDecisions.Web" TagPrefix="CR" %>

<%@ Register Assembly="TraceMenu" Namespace="TraceMenu" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>PopupTraceMenuExample</title>    
</head>
<body>
    
<form id="form1" runat="server">    
    
<div>
        
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
            
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            
<RowStyle BackColor="White" ForeColor="#003399" />
            
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
        
</asp:GridView>  &nbsp;<br />
        
<cc1:PopupTraceMenu ID="PopupTraceMenu1" runat="server" TargetControl="GridView1">
        
</cc1:PopupTraceMenu>                      
    
</div>
    
</form>
    

</body>
</html>


效果截图:

完整代码下载:创建自定义菜单

posted on 2007-05-20 22:43  Travelling  阅读(667)  评论(1编辑  收藏  举报