|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionI’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 BackgroundAround one and a half years ago, I had created a context menu to display on a ConstructorThe 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: 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 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.
};
MethodsThe context menu control has the following public methods:
PropertiesThe context menu control has only a public property. It only displays the current version of the context menu control. It does nothing else.
EventsThe context menu control has only one event – The
The local anonymous method that responds to the var EventHandlerName = function(Sender, EventArgs)
{
...
}
where 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 Using the ControlAdd a reference to the ContextMenu.js file in your web page, as: <script type="text/javascript" src="JS/ContextMenu.js"></script>
Create a <div id="div" style="width: 925px; height: 300px; background-color: silver;">
</div>
Now, create a <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 ClickEventListener: OnClick
Now, create a 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 Now, attach the < … oncontextmenu="javascript:return oCustomContextMenu.Display(event);" … >
Invoke the window.onunload = function(){ oCustomContextMenu.Dispose(); }
ConclusionSo 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 CompatibilityI have tested this control on various browsers and it works fine except on Opera as Opera doesn’t support the
|
||||||||||||||||||||||