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

JavaScript 上下文菜单控件

Samir NIGAM
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (41投票s)

2008年6月9日

CPOL

3分钟阅读

viewsIcon

292238

downloadIcon

3308

适用于 Web 应用程序的跨浏览器 JavaScript 右键菜单控件。

demo.gif

引言

我将在这里介绍一个 JavaScript 右键菜单控件。它是一个跨浏览器的 JavaScript 类，可以在各种浏览器上运行，除了 Opera，因为 Opera 不支持 oncontextmenu 事件。

背景

大约一年半前，我创建了一个右键菜单，用于在 GridView 控件上显示，以便在项目中执行某些操作。那个项目是基于 IE 的。所以，右键菜单是 IE 特定的，而不是跨浏览器兼容的。此外，它是 JavaScript 和 HTML 的混合体：我使用 HTML table 和 div 元素创建了它的布局，并使用 JavaScript 显示它。我想将其开发为一个跨浏览器的 JavaScript 类。因此，我开始了它的开发，在花费了一些时间研究了互联网和书籍之后，我成功了。

构造函数

右键菜单类的构造函数接受一个 Object Literal 类型的参数。该控件的 Object Literal 参数定义如下：

var Arguments = {
   Base: _Base, // Base reference where Context Menu to be displayed.
   Width: _Width, // Width of the Context Menu in integer.
   FontColor: _FontColor, // Font Color of each Context Menu item.
   HoverFontColor: _HoverFontColor, // Hover Font Color of each Context Menu item.
   HoverBackgroundColor: _HoverBackgroundColor, // Hover Background Color
                                                // of each Context Menu item.
   HoverBorderColor: _HoverBorderColor, // Hover Border Color of each Context Menu item.
   OnClickEventListener: _OnClickEventListener // Reference of the click event handler.
};

//Example:

var Arguments = {
   Base: document.getElementById('div'),
   Width: 200,
   FontColor: black,
   HoverFontColor: white,
   HoverBackgroundColor: blue,
   HoverBorderColor: orange,
   OnClickEventListener: ClickEventHandler  
};

您可以将 Object Literal 参数的每个属性赋值为 null。在这种情况下，每个属性都将获得其默认值，如下所示：

var Arguments = {
   Base: null, // Default Value: document.documentElement.
   Width: null, // Default Value: 200.
   FontColor: null, // Default Value: ‘black’.
   HoverFontColor: null, // Default Value: ‘white’.
   HoverBackgroundColor: null, // Default Value: '#2257D5'.
   HoverBorderColor: null, // Default Value: ‘orange’.
   OnClickEventListener: null //Default anonymous method.
};

方法

右键菜单控件具有以下公共方法：

  • AddItem(ImagePath, ItemText, IsDisabled, CommandName) - 用于添加一个右键菜单项。

    它接受四个参数：

    • ImagePath：项目图像的路径。
    • ItemText：项目文本。
    • IsDisabled：指示该项目是否应被禁用。
    • CommandName：项目的命令名称。
  • AddSeparatorItem()：用于添加一个分隔符项。
  • Display(e)：用于显示右键菜单。
  • Hide()：用于隐藏右键菜单。
  • Dispose()：用于销毁右键菜单。
  • GetTotalItems()：用于获取包括分隔符项在内的总项数。

属性

右键菜单控件只有一个公共属性。它仅显示当前版本的右键菜单控件。除此之外，它不做任何事情。

  • Version：显示当前版本。

事件

右键菜单控件只有一个事件——Click 事件，当点击分隔符项以外的项时触发。

  • Click：当点击一个项时触发。

响应 Click 事件的本地匿名方法（即事件处理程序）具有以下签名：

var EventHandlerName = function(Sender, EventArgs)
{
   ...
}

其中 Sender 是引发 click 事件的元素（即 tr 元素）的引用，EventArgs 是包含 Click 事件相关必要信息的 Object Literal。EventArgs Object Literal 具有以下定义：

var EventArgs = {
   CommandName: _CommandName, // Base Command name of the Item.
   Text: _Text, // Item Text.
   IsDisabled: _IsDisabled, // Indicate whether Item to be disabled or not.
   ImageUrl: _ImageUrl // Path of the Item image. 
};

请注意，Click 事件处理程序是 C# 风格的事件处理程序。

使用控件

在您的网页中添加对 ContextMenu.js 文件的引用，如下所示：

<script type="text/javascript" src="JS/ContextMenu.js"></script>

在网页上创建一个 div 元素，如下所示：

<div id="div" style="width: 925px; height: 300px; background-color: silver;">
</div>

现在，在网页的 head 部分创建一个 script 标签，并在 window.onload 事件中添加以下代码：

<script type="text/javascript">
    var oCustomContextMenu = null;
    var oBase = null;
    
    window.onload = function()
    {
        oBase = document.getElementById('div');
        
        var Arguments = {
            Base: oBase,
            Width: 200,
            FontColor: null,
            HoverFontColor: null,
            HoverBackgroundColor: null,
            HoverBorderColor: null,
            ClickEventListener: OnClick
        };
        
        oCustomContextMenu = new CustomContextMenu(Arguments); 
                        
        oCustomContextMenu.AddItem('Images/ei0019-48.gif', 'Add', false, 'Add');
        oCustomContextMenu.AddItem('Images/save.png', 'Save', true, 'Save');
        oCustomContextMenu.AddSeparatorItem();
        oCustomContextMenu.AddItem('Images/ei0020-48.gif', 'Update', false, 'Update');
        oCustomContextMenu.AddSeparatorItem();
        oCustomContextMenu.AddItem(null, 'Cancel', false, 'Cancel');
    } 
</script>

首先，获取 Base 对象的引用，并创建一个包含必要属性的 Arguments Object Literal。之后，使用 new 关键字实例化一个右键菜单对象，并添加右键菜单项。别忘了在 Arguments Object Literal 中进行 Click 事件的绑定。

ClickEventListener: OnClick

现在，将 Click 事件处理程序创建为一个本地匿名方法：

var OnClick = function(Sender, EventArgs)
{
    //Code
    …
    oCustomContextMenu.Hide();
} 

//Example:

var OnClick = function(Sender, EventArgs)
{
    switch(EventArgs.CommandName)
    {
        case 'Add':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
            break;
        case 'Save':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
            break;
        case 'Update':
            alert('Text: ' + EventArgs.Text);
            alert('IsDisabled: ' + EventArgs.IsDisabled);
            alert('ImageUrl: ' + EventArgs.ImageUrl);
            break;
        case 'Cancel':
           alert('Text: ' + EventArgs.Text);
           alert('IsDisabled: ' + EventArgs.IsDisabled);
           alert('ImageUrl: ' + EventArgs.ImageUrl);
           break;
    }
    
    oCustomContextMenu.Hide();
}

当您点击右键菜单上的任何一项时，将调用此方法。请不要忘记在事件处理程序的最后调用 Hide 方法。

现在，将 oncontextmenu 事件附加到之前创建的 div 上：

< … oncontextmenu="javascript:return oCustomContextMenu.Display(event);" … >

为了销毁右键菜单对象，请在 window.onunload 事件中调用 Dispose 方法。

window.onunload = function(){ oCustomContextMenu.Dispose(); }

结论

这就是我的方法。我花了很长时间来为 JavaScript 类创建 C# 风格的事件处理程序，终于成功了。请让我知道任何 bug 和改进此右键菜单控件的建议。

浏览器兼容性

我在各种浏览器上测试了这个控件，除了 Opera（因为 Opera 不支持 oncontextmenu 事件）之外，它都能正常工作。如果有人知道如何在 Opera 上模拟 oncontextmenu 事件，请告知我。支持的浏览器如下：

Browsers.png

© . All rights reserved.