65.9K
CodeProject 正在变化。 阅读更多。
Home

MenuPilot 1.0 (ASP.NET 2.0 的开源上下文菜单)

Dan Letecky
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (55投票s)

2006年10月25日

3分钟阅读

viewsIcon

166140

downloadIcon

1254

精美的 DHTML 上下文菜单，具有 Visual Studio .NET 2005 中常见的“操作列表”/“智能标签”布局。

引言

用例 #1：GridView 操作项

此控件允许您将此表替换为

一个更简单的表

用例 #2：图片操作

MenuPilot 也支持图片的任务菜单。您可以将此 UI 替换为

一个更紧凑的 UI

如果您有一个满是图片的页面，并且没有空间放置操作链接，这一点尤其有用。

MenuPilot 功能

  • 可自定义的提示图标
  • 可自定义的颜色
  • 支持数据绑定
  • 支持菜单项分隔符
  • 完全支持 Visual Studio .NET 2005 设计时
  • 为 ASP.NET 2.0 编译
  • 适用于三种内联 ASP.NET 控件：超链接、标签 和 图片
  • 菜单项支持标题和目标链接属性
  • 菜单项可以执行 JavaScript 或跳转到 URL
  • 包含 Internet Explorer z-index 错误的修复
  • 包含 Internet Explorer 窗口控件 z-index 错误的修复

工作原理

这个概念并不复杂

  • MenuPilot 控件会绘制两个隐藏元素：“提示图标”和“任务菜单”。
  • 当用户将鼠标悬停在控件上时（onmouseover 事件），会出现“提示图标”。
  • 当用户单击提示图标时，会出现“任务菜单”。
  • 当用户将鼠标移出菜单时，提示图标和任务菜单都会消失。

使其工作的要求

然而，为了使其正常工作，还有很多任务需要完成。

  1. 在 onmouseover 事件发生后，需要等待一段时间才能激活提示图标。在 onmouseout 事件发生后，也需要等待一段时间才能将其停用。
    function __menuPilot_activateLabel(o)
{
  if (__menuPilot_activeId != o.id)
    __menuPilot_clearNow();

  if (__menuPilot_t != null)
    clearTimeout(__menuPilot_t);

  __menuPilot_waitingFor = o.id;
  __menuPilot_t = setTimeout(__menuPilot_activateLabelLater, 100);
}

function __menuPilot_activateLabelLater() 
{
  document.getElementById(__menuPilot_waitingFor + 'down').style.display = '';
  __menuPilot_activeId = __menuPilot_waitingFor;
}
  2. 当用户将鼠标悬停在另一个 MenuPilot 控件上时，有必要停用提示图标和任务菜单。

    所有必需的 <span> 元素（即主文本 <span>、提示图标 <span> 和菜单 <span>）会在 onmouseout 事件上调用以下函数。

    function __menuPilot_clearAll()
{
  if (__menuPilot_t != null)
    clearTimeout(__menuPilot_t);
  __menuPilot_t = setTimeout(__menuPilot_clearNow, 300);
}

function __menuPilot_clearNow()
{
  var id = __menuPilot_activeId;
  if (id == null)
    return;
  __menuPilot_deactivateLabel(document.getElementById(id));
  __menuPilot_deactivateMenu(document.getElementById(id + 'menu'));
  __menuPilot_activeId = null;
  __menuPilot_isActiveMenu = false;
}
  3. 在 Internet Explorer 中，有必要将菜单绘制在所有 <select> 元素之上。

    有一个针对 IE 错误的解决方法，该错误会将所有 <select> 元素始终绘制在最上面（即在菜单之上）。请参阅 http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

控件

MenuPilot 中提供了三个控件：

  • MenuPilotHyperLink
  • MenuPilotLabel
  • MenuPilotImage

它们继承自标准的 HyperLink、Label 和 Image 控件，因此所有标准功能都可用。

[PersistChildren(false)]
[ParseChildren(true, "MenuItems")]
[DefaultProperty(null)]
[Designer(typeof(ControlDesigner))]
[ToolboxBitmap(typeof(HyperLink))]
public class MenuPilotHyperlink : HyperLink
{
//...

它仅添加了自定义属性。

属性 类型 描述 默认值
AppearAfter System.Int32 在提示图标出现前等待的毫秒数。 100
DisappearAfter System.Int32 在菜单消失前等待的毫秒数。 500
HintIcon System.String 提示图标的路径。 "action.gif"
HintIconHeight System.Int32 提示图标的高度（以像素为单位）。 11
HintIconWidth System.Int32 提示图标的宽度（以像素为单位）。 11
MenuActionColor System.Drawing.Color 任务菜单项（超链接）的颜色。 #2859AB
MenuBackColor System.Drawing.Color 任务菜单背景的颜色。 #F0EEE1
MenuBorderColor System.Drawing.Color 任务菜单边框的颜色。 #ACA899
MenuFontSize System.String 任务菜单的字体大小（CSS 语法）。 8pt
菜单项 MenuPilot.Web.Ui.
MenuItemCollection		 菜单项的集合。 null
MenuTitle System.String 任务菜单的标题。 "Tasks"
MenuTitleBackColor System.Drawing.Color 任务菜单标题背景的颜色。 #C1D2EE
值 System.String 用于将某个值传递给菜单项超链接的可绑定字符串属性。 null

致谢

  • Joe King 关于使用 DIV IFRAME 遮罩来覆盖 IE 中的 SELECT 框和其他窗口化控件的示例。

资源

© . All rights reserved.