Writing a Plugin (^) ❘ 259
The fi rst chunk of code (preceding this sentence) provides support for passing in some options. To
disable the context menu, you pass in the string 'disabled', as in contextMenu('disabled'). To enable
the context menu, you call contextMenu() with no arguments.
If you like, you can expand on this example and add some options of your own. The following is the
function call that gets everything started:
$('div#applicationContextMenu').contextMenu();
In the HTML, you set up and structure a
element that contains a
- element, and this
- Open
- Save
- Save As...
- Edit
- element represents a context menu option.
The next block of code in the JavaScript is a reusable function that gets the dimensions of the view-
port. This is made compatible with older versions of Internet Explorer, which use different ways of
getting the dimensions of the viewport. The method used by most modern, standards-compliant
browsers appears in the fi rst block of code:
function getViewportDimensions()
{
var x, y;
if (self.innerHeight)
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight)
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body)
[http://www.it-ebooks.info](http://www.it-ebooks.info)
becomes the context menu:
Along with some CSS, this context menu becomes almost indistinguishable from a real Mac OS X
system context menu. Also in the HTML document, you defi ne a boundary for this context menu.
The context menu will occur only within the confi nes of this element. In our document, that con-
tainer became the element because it was assigned the contextMenuContainer class name. For
this plugin to work, the context menu can be placed in any container, so long as it has a parent or
ancestor with the contextMenuContainer class name. This is all that you need from the standpoint of
the HTML structure, a container element with the contextMenuContainer class name and the
element containing a
- element. Each