Typical Usage

Be sure to call ContextMenu.intializeContextMenu() in the onload event of your document. Then define a function to be called when an item is right clicked by attaching it to its oncontextmenu handler. The function will look something like this:

function contextForBody(obj)
   var eobj,popupoptions
   popupoptions = [
	new ContextItem("Refresh",function(){window.location.reload();}),
	new ContextItem("Disabled Item",null,true),
    	new ContextSeperator(),
	new ContextItem("Print",function(){window.print()},true),
	new ContextItem("Kill Jared",null,true),
	new ContextItem("This does nothing",function(){}),
	new ContextSeperator(),
   	new ContextItem("Show Text",function(){window.status=obj.innerText;})

Also, be sure to include <link rel="STYLESHEET" type="text/css" href="css/WebFX-ContextMenu.css">.


Really, you can think of the context menu as simply a container for ContextItem and ContextSeperator Objects. To create a ContextItem object, simply call its constructor:

new ContextItem(sHTML,fFunction[,bDisabled])

Name Description
sHTML a string of html to display for this item when the menu is shown
fFunction a function object to call when the item is clicked
bDisabled a boolean value to determine whether an item is disabled. Default it false.

ContextSeperator objects have no methods or properties and are simply included to for ease of use. Passing a ContextSeperator object to ContextMenu.display will create a seperator in the context menu.

For more examples of use, try downloading the zip file and check out the example page.

Look & Feel

Author: Jared Nuzzolillo (special thanks to Erik)