Cutting Edge:为ASP.NET控件加入快捷菜单(2)
点击次数：15 次 发布日期：2008-11-26 23:42:57 作者：源代码网
|
源代码网推荐作者：Dino Esposito 源代码网推荐翻译：刘瑞才 源代码网推荐源码：CuttingEdge0502.exe 编程接口 源代码网推荐我们的ContextMenu控件从WebControl继承并执行INamingContainer接口 源代码网推荐 源代码网推荐public class ContextMenu : WebControl, INamingContainer 源代码网推荐图一控件的成员细节,如下： 源代码网推荐 源代码网推荐属性 描述 AutoHide 标志当用户鼠标移出控件区域时，是否自动隐藏快捷菜单 BoundControls 返回使用快捷菜单的控件集合 CellPadding 返回或设置每个菜单项周围的空间的象素数 ContextMenuItems 返回菜单项的集合 RolloverColor 返回或设置当鼠标划过菜单项时突显的颜色 方法 描述 GetEscReference 返回当用户按下Esc键时用于隐藏页面中的快捷菜单的JavaScrip代码 GetMenuReference 返回一段Javascript代码，这段代码将关联到快捷菜单所对应的HTML元素上． GetOnClickReference 返回当用户在菜单区域外点击时隐藏快捷菜单的代码． 事件 描述 ItemCommand 当用户点击一个快捷菜单项进激发． 源代码网推荐 源代码网推荐关键属性是ContextMenuItmes集合属性，它包含了ContextMenuItem类型的对象集合，每一个对象表示一个菜单项。ContextMenuItem类的源码如下： 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐[TypeConverter(typeof(ExpandableObjectConverter))] 源代码网推荐public class ContextMenuItem 源代码网推荐{ 源代码网推荐public ContextMenuItem() {} 源代码网推荐public ContextMenuItem(string text, string commandName) 源代码网推荐{ 源代码网推荐_text = text; 源代码网推荐_commandName = commandName; 源代码网推荐} 源代码网推荐private string _text; 源代码网推荐private string _commandName; 源代码网推荐private string _tooltip; 源代码网推荐public string Text 源代码网推荐{ 源代码网推荐get {return _text;} 源代码网推荐set {_text = value;} 源代码网推荐} 源代码网推荐public string CommandName 源代码网推荐{ 源代码网推荐get {return _commandName;} 源代码网推荐set {_commandName = value;} 源代码网推荐} 源代码网推荐public String Tooltip 源代码网推荐{ 源代码网推荐get {return _tooltip;} 源代码网推荐set {_tooltip = value;} 源代码网推荐} 源代码网推荐} 源代码网推荐 源代码网推荐 源代码网推荐每个菜单项具有显示文本，命令名(command name)，提示文本(tooltip)。你可以通过各方法扩展这个类，例如添加一个图片URL，一个不可用状态，或一个目标URL等。显示文本被显示于菜单项上；命令名是一个唯一标识字符串，用于指定或确定与菜单项关联的命令。tooltip获取或设置当鼠标指针停留在菜单项上时显示的工具提示文本 源代码网推荐 源代码网推荐当用户点击菜单项时，页面回传并激发一个服务器端的ItemCommand事件。控制页通过操作这一事件来执行一些代码来响应用户对菜单项的点击。图3是一个使用快捷菜单的示例工程的截图： 源代码网推荐 源代码网推荐 源代码网推荐要使用快捷菜单，你需要使用menu item对象填充ContextMenuItems集合，调整一些可视化样式，至少添加一个控件到BoundControls集合中。然后在浏览器中打开示例页，在任意绑定快捷菜单的控件上右击。效果如图： 源代码网推荐 源代码网推荐 源代码网推荐每个菜单项包含一个LinkButton控件，这个LinkButton控件有一个内部绑定的点击事件处理程序。当检测到点击时，页面回传并激发这个点击事件。接着，预定义的处理程序将事件冒泡到上一级，并改名为ItemCommand。 源代码网推荐 源代码网推荐控件还定义了一些可视化的属性，象CellPadding,RolloverColor和AutoHide。重申一下，在Windows中快捷菜单可以在按下Esc键或在菜单区域外点击时取消。对于基于Web的快捷菜单来说，AutoHide属性为快捷菜单的根标签添加OnMouseLeave脚本，所以当用户的鼠标离开菜单区域时，这个根标签的子树将隐藏。把AutoHide作为一个可设置的属性，用户可以在需要的时候设置是否在鼠标离开时自动隐藏快捷菜单。 源代码网推荐 源代码网推荐要使菜单能够在点击或按Esc键时隐藏，需要添加如下处理程序：< br><bodyonkeypress="..."onclick="..."> 源代码网推荐 源代码网推荐 源代码网推荐处理程序脚本可以被程序化的添加到每一个页面元素，只要这个元素被标记为runat=server。这样实际上就是在ContextMenu快捷菜单控件和页面之间创建了一个逻辑信赖。另外，你必须在页面上定义一个额外的服务器控件。当然，在运行时实例化一个额外的控件并不会严重的影响执行效果，但是为什么仅仅因为想容易的consume其它的控件而实例化一个无用的控件呢。作为选择下面这个方法也可以达到同样的效果：用body获取按Esc键和鼠标点击，并且你节省了服务器控件的开支 源代码网推荐 源代码网推荐<body onkeypress="<％ = ContextMenu1.GetEscReference() ％>" onclick="<％ = ContextMenu1.GetOnClickReference() ％>"> 源代码网推荐 源代码网推荐让我们更详细的说一下控件的实现 源代码网推荐 源代码网推荐控件的实现 源代码网推荐 源代码网推荐ContextMenu控件的核心在于重写CreatechildControls方法。在这个方法中控件创建界面并在页面中写入所需的脚本。我们说过，ContexMenu控件的用户界面分为两部分——图形和脚本。我们先说图形。 源代码网推荐 源代码网推荐CreateChildControls方法产生一个可以在页面移动的HTML块，它就是所需的弹出菜单。照这样看来，快捷菜单就是包含一个table表单的<DIV> ，每一个菜单项就是这个table表单中的一行。使用table是由于一系列的开发点（象边框和浮动层）和它能很容易的扩展（例如添加侧边图象）所决定的。 源代码网推荐 源代码网推荐HtmlGenericControl div = new HtmlGenericControl("div"); 源代码网推荐div.ID = "Root"; 源代码网推荐div.Style["Display"] = "none"; 源代码网推荐div.Style["position"] = "absolute"; 源代码网推荐if (AutoHide) 源代码网推荐 div.Attributes["onmouseleave"] = "this.style.display="none""; 源代码网推荐 源代码网推荐 源代码网推荐我们使用层叠样式表(CSS)来隐藏最外层的<DIV>标签，并且用绝对位置标记这个<DIV>。如果自动隐藏可用，那么<DIV> 还得处理 mouse-leave(鼠标离开)事件来隐藏本身。那么 onmouseout和onmouseleave事件有什么不同呢？前者是当鼠标移动到一个新的元素上时发生，而后者是当鼠标移出绑定对象时发生。举例说明：你的鼠标在一个有两行的表单（table）上移动。当你在table的两行之间移动时，onmouseout事件就会发生；只有你的鼠标移动到table表单之外时onmouseleave事件才发生。 源代码网推荐 源代码网推荐Table包含和要显示的菜单项个数相同的行，每一行有一个单元格，每个单元格里放一个LinkButton对象。菜单通过一个循环创建： 源代码网推荐 源代码网推荐foreach(ContextMenuItem item in ContextMenuItems) 源代码网推荐{ 源代码网推荐TableRow menuItem = new TableRow(); 源代码网推荐menuTable.Rows.Add(menuItem); 源代码网推荐TableCell container = new TableCell(); 源代码网推荐menuItem.Cells.Add(container); 源代码网推荐LinkButton button = new LinkButton(); 源代码网推荐container.Controls.Add(button); 源代码网推荐... 源代码网推荐} 源代码网推荐 源代码网推荐 源代码网推荐行的单元格有一组脚本操作——onmouseover和onmouseout——完成鼠标划过的效果。当鼠标划过时改变背景颜色。鼠标离开时恢复初始颜色。默认的背景色由从WebControl继承的background属性指定。高亮颜色由新的属性RolloverColor指定。 源代码网推荐 源代码网推荐string color = String.Format(ContextMenu.OnMouseOver, ColorTranslator.ToHtml(RolloverColor)); 源代码网推荐container.Attributes["onmouseover"] = color; 源代码网推荐color = String.Format(ContextMenu.OnMouseOut, ColorTranslator.ToHtml(BackColor)); 源代码网推荐container.Attributes["onmouseout"] = color; 源代码网推荐 源代码网推荐 源代码网推荐你需要把.NET的System.Drawing.Color值转换成可用的HTML颜色。有意思的是，无论是Color类的ToString方法还是它的Name属性都不能在所有情况下返回对应的HTML颜色字符串，不知是不是有意这样的:(。Name属性基本可以实现这一功能，只有和种情况例外。当颜色不能和已知的颜色匹配时，这个属性返回颜色的RGB组，外加alpha通道值。要得到当前的HTML颜色，你必须移除alpha通道值（通常是开头的十六进制 ff 字符串）并使用#号替换它。幸运的是，System.Drawing.ColorTranslator类可以自动完成这项工作:)。 源代码网推荐(待续) 源代码网推荐 源代码网供稿. |
