Create a Context Menu with Dojo and Dijit

Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context menus in just minutes.

The Dojo JavaScript

/* require necessary classes */
dojo.require('dijit.Menu');
dojo.require('dijit.MenuSeparator');
dojo.require('dijit.MenuItem');
dojo.require('dijit.PopupMenuItem');

The above requires the necessary widget classes that will be used in the context menu.

The Context Menu HTML

<-- menu container -->
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display:none;">

	<-- enabled menu item -->
	<div dojoType="dijit.MenuItem" id="enabledItem" onClick="Clicked enabled item!">Enabled Item</div>
	
	<-- disabled menu item -->
	<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
	
	<-- separator -->
	<div dojoType="dijit.MenuSeparator"></div>
	
	<-- menu items with icons -->
	<div dojoType="dijit.MenuItem" iconClass="dijitIconCut"
		onClick="alert('Cutting!')">Cut</div>
	<div dojoType="dijit.MenuItem" iconClass="dijitIconCopy"
		onClick="alert('not actually copying anything, just a test!')">Copy</div>
	
	<div dojoType="dijit.MenuSeparator"></div>
	
	<-- nested popup menus with items -->
	<div dojoType="dijit.PopupMenuItem">
		<span>Enabled Submenu</span>
		<div dojoType="dijit.Menu" id="submenu2">
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
			<div dojoType="dijit.PopupMenuItem">
				<span>Deeper Submenu</span>
				<div dojoType="dijit.Menu" id="submenu4">
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
				</div>
			</div>
		</div>
	</div>
	
	<-- popup menu with disabled item -->
	<div dojoType="dijit.PopupMenuItem" disabled="true">
		<span>Disabled Submenu</span>
		<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
		</div>
	</div>
</div>

The menu is based on a system of nested DIV elements.  The top element is a dijit.Menu widget with child dijit.MenuItem widgets.  You may also add a dijit.MenuSeparator widget or a dijit.PopupMenuItem widget with child dijit.MenuItem widgets to create a popup menu.  You may disable menu items with "disabled='true'" declaratively or by using JavaScript:

dijit.byId('enabledItem').attr('disabled','true');

So simple! Context menus may also be created programmatically, but the declarative method of widget creation speeds up development.

This is just another way that Dojo's Dijit framework allows you to quickly create a functional UI widget in minutes!