This widget was created to work in IE5 and above. We are currently working out a bug in IE5 and it should be operational soon. Currently, IE5.5+ seems to support it perfectly. Stay tuned for updates.

Introduction

In a constant fight to make more widgets available to dhtml application developers, I realized a key component missing from the html widget set was a customizable context menu. There are other context menu scripts available, but this one has some additional cool features. Among other things, it can be configured to appear exactly as a native windows context menu, and can be appear on top of select boxes and iframes. Also, creation of the context menu can be controlled by assigning a simple event handler and a particular function for any type of element you want it attached to.

If you are using IE5.5+, right-click anywhere on the page to show the menu.

Design and Implementation

I wanted the context menu to be able to appear above other Iframes and select boxes, so I decided against a div element to contain the menu and used an Iframe instead. The rest of the design was pretty much straight-forward; I just included some functions for forcing the menu to disapear when the document containing it lost focus, and ensured that its appearance was completely customizable with the use of CSS classes. The largest portion of the code is the generation of the div elements that contain each option. The options may contain any type of html, but (obviously) certain html looks pretty funny.

An important desicion was how I expected users of the object to set up particular context menus for different elements on the page. To make it as versatile as possible, I decided to have the user attach a function to the oncontextmenu event handler of each element, which will intialize all of the ContextItem objects and call ContextMenu.display() with an array of ContextItem and ContextSeperator objects as an argument.

Typical Usage
Look & Feel
Download

Author: Jared Nuzzolillo (special thanks to Erik)