Click here to Skip to main content
15,867,835 members
Articles / Web Development / XHTML
Article

JavaScript Context Menu Control

Rate me:
Please Sign up or sign in to vote.
4.95/5 (45 votes)
23 Jun 2008CPOL3 min read 229.2K   3.3K   120   66
Cross-browser JavaScript context menu control for web applications.

demo.gif

Introduction

I’m going to introduce here a JavaScript Context Menu control. It is a cross-browser JavaScript class that runs on various browsers except Opera as Opera doesn’t support the oncontextmenu event.

Background

Around one and a half years ago, I had created a context menu to display on a GridView control to perform some actions in a project. That project was IE based. So, the context menu was IE specific, and not cross-browser compatible. Also, it was a mixture of JavaScript and HTML: I had created its layout using the HTML table and div elements and displayed it using JavaScript. I wanted to develop it as a cross-browser JavaScript class. So, I started its development, and after spending some time on the Internet and books, I succeeded.

Constructor

The constructor of the context menu class takes an argument of the type Object Literal. The definition of the Object Literal argument for this control is given below:

JavaScript
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  
};

You can assign each property of the Object Literal argument to null. In this case, each property will acquire its default value as:

JavaScript
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.
};

Methods

The context menu control has the following public methods:

  • AddItem(ImagePath, ItemText, IsDisabled, CommandName) - Used to add a context menu item.

    It takes four arguments:

    • ImagePath: Path of the item image.
    • ItemText: The item text.
    • IsDisabled: Indicates whether the item is to be disabled or not.
    • CommandName: The command name of the item.
  • AddSeparatorItem(): Used to add a separator item.
  • Display(e): Used to display the context menu.
  • Hide(): Used to hide the context menu.
  • Dispose(): Used to destroy the context menu.
  • GetTotalItems(): Used to get the count of total items including the separator items.

Properties

The context menu control has only a public property. It only displays the current version of the context menu control. It does nothing else.

  • Version: Displays the current version.

Events

The context menu control has only one event – The Click event that fires when items other than the separator items are clicked.

  • Click: Fires when an item is clicked.

The local anonymous method that responds to the Click event (i.e., the event handler) has the following signature:

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

where Sender is the reference of the element that raises the click event (i.e., the tr element) and EventArgs is the Object Literal that contains the necessary information regarding Click event. The EventArgs Object Literal has the following definition:

JavaScript
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. 
};

Note that the Click event handler is a C# style event handler.

Using the Control

Add a reference to the ContextMenu.js file in your web page, as:

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

Create a div element on the web page, as:

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

Now, create a script tag in the head section of the web page and add the following code in the window.onload event:

JavaScript
<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>

First, get the reference of the Base object and create an Arguments Object Literal with the necessary properties. After that, instantiate a context menu object using the new keyword and add the context menu items. Don’t forget the Click event wire up in the Arguments Object Literal:

JavaScript
ClickEventListener: OnClick 

Now, create a Click event handler as a local anonymous method:

JavaScript
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();
}

This method will get called when you click on any item of the context menu. Don’t forget to invoke the Hide method at last in the event handler.

Now, attach the oncontextmenu event on the div that has been created earlier:

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

Invoke the Dispose method in the window.onunload event in order to destroy the context menu object:

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

Conclusion

So this is my approach. I was working for a long time to create C# like event handlers for JavaScript classes and finally, I’ve done it. Please let me know of any bugs and suggestions to improve this context menu control.

Browser Compatibility

I have tested this control on various browsers and it works fine except on Opera as Opera doesn’t support the oncontextmenu event. If any one has information regarding simulating the oncontextmenu event on Opera, kindly let me know. The following are the supported browsers:

Browsers.png

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Infogain India Pvt Ltd
India India


Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.



He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.



He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.



Awards:



Comments and Discussions

 
GeneralNice one !!! Pin
Ashutosh Phoujdar9-Jun-08 22:26
Ashutosh Phoujdar9-Jun-08 22:26 
GeneralRe: Nice one !!! Pin
Samir NIGAM9-Jun-08 23:20
Samir NIGAM9-Jun-08 23:20 
Generalhmm... Pin
4866030_us9-Jun-08 18:27
4866030_us9-Jun-08 18:27 
GeneralRe: hmm... Pin
Samir NIGAM9-Jun-08 18:30
Samir NIGAM9-Jun-08 18:30 
Generalhi Pin
good.morning_everyday9-Jun-08 18:25
good.morning_everyday9-Jun-08 18:25 
GeneralRe: hi Pin
Samir NIGAM9-Jun-08 18:29
Samir NIGAM9-Jun-08 18:29 
Generalgood Pin
Robert H. L.9-Jun-08 18:22
Robert H. L.9-Jun-08 18:22 
GeneralRe: good Pin
Samir NIGAM9-Jun-08 18:29
Samir NIGAM9-Jun-08 18:29 
GeneralGreat Job Pin
Latticeuno9-Jun-08 18:20
Latticeuno9-Jun-08 18:20 
GeneralRe: Great Job Pin
Samir NIGAM9-Jun-08 18:29
Samir NIGAM9-Jun-08 18:29 
GeneralNice ! Pin
Rami Shareef9-Jun-08 3:57
Rami Shareef9-Jun-08 3:57 
GeneralRe: Nice ! Pin
Samir NIGAM9-Jun-08 18:12
Samir NIGAM9-Jun-08 18:12 
GeneralSir Very Nice Work Pin
Sandeep Shekhar9-Jun-08 2:39
Sandeep Shekhar9-Jun-08 2:39 
GeneralRe: Sir Very Nice Work Pin
Samir NIGAM9-Jun-08 3:03
Samir NIGAM9-Jun-08 3:03 
GeneralGood Work Pin
MCSDvikasmisra9-Jun-08 1:42
MCSDvikasmisra9-Jun-08 1:42 
GeneralRe: Good Work Pin
Samir NIGAM9-Jun-08 2:09
Samir NIGAM9-Jun-08 2:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.