The right context menu code is from RightContext by Harel Malka. The code has been slightly modified and integrated with the web framework for convenience.

Context menus are menus which are shown for a certain context. They're more commonly known as right-click menus, as it is typically a right click which shows them. The menus show actions which are possible for a thing (or area containing a thing) which has been right clicked.

Context menus are very useful for grouping like functionality, and also clean up the page, as the functionality is only shown when chosen to display. The disadvantage, if any, of context menus within web pages is that the user may not be aware of the menu. Application familiarity is required.

Here's a working example: /lib/context/contextMenu.css /lib/context/contextMenu.js

right click here

... and the full code listing: <![CDATA[ <xsl:call-template name="util.include"> <xsl:with-param name="style1">/lib/context/contextMenu.css</xsl:with-param> <xsl:with-param name="script1">/lib/context/contextMenu.js</xsl:with-param> </xsl:call-template> <div style="border: 1px solid black; text-align: center; font-weight: bold; padding: 3px; background: lightblue" context="simple">right click here</div> <script> var emptyMenu = { attributes: "style" , items: [ {type:RightContext.TYPE_MENU, text:"Do Something", onclick:function(){ alert('this could be really interesting'); }, image: "/images/icons/download.png", align:"left" }, {type:RightContext.TYPE_MENU, text:"Show Style", onclick:function(){ alert('The style of the div is [style]'); }, image: "/images/icons/link.png", align:"right" }, ] }; RightContext.allowedContexts=["div"]; RightContext.addMenu("simple", emptyMenu); RightContext.initialize(); </script> ]]>

First, include /lib/context/contextMenu.css and /lib/context/contextMenu.js. <![CDATA[ <xsl:call-template name="util.include"> <xsl:with-param name="style1">/lib/context/contextMenu.css</xsl:with-param> <xsl:with-param name="script1">/lib/context/contextMenu.js</xsl:with-param> </xsl:call-template> ]]>

For each element which is to trigger a context menu, define a context attribute with a value being the name of the context menu to show. In this case, the div has a context attribute of simple, meaning that it will show the menu named 'simple'. <![CDATA[ <div style="border: 1px solid black; text-align: center; font-weight: bold; padding: 3px; background: lightblue" context="simple">right click here</div> ]]>

Then menu(s) can now be defined within a javascript block (or within an included js file): <![CDATA[ <script> var emptyMenu = { attributes: "style" , items: [ {type:RightContext.TYPE_MENU, text:"Do Something", onclick:function(){ alert('this could be really interesting'); }, image: "/images/icons/download.png", align:"left" }, {type:RightContext.TYPE_MENU, text:"Show Style", onclick:function(){ alert('The style of the div is [style]'); }, image: "/images/icons/link.png", align:"left" }, ] }; ]]> The attributes parameter defines attributes that will be read within the source element and will be replaced within the context menu. In this example, the 'style' attribute is read and is substituted for display on click of the 'Show Style' item. In this way, further context specific information can be displayed in the menu.

The items parameter defines the menu items. There are many alternatives which may be present within a menu item. Most typically, items will be of TYPE_MENU, have text and possibly an image. There will be an onclick or a url (with optional frame). If the type is TYPE_SEPARATOR then a separator will be included. For more configuration options see the source in contextMenu.js.

Finally, the names of the elements which might contain a context attribute are given. This helps to reduce the load time, as only elements with the given name(s) are scanned for context elements. Add the menus by name and initialize the context menus. This will associate the elements with the appropriate menu via the context attribute. <![CDATA[ RightContext.allowedContexts=["div"]; RightContext.addMenu("simple", emptyMenu); RightContext.initialize(); </script> ]]>

That's it! The right click menus can be made more useful by calling dialogs. The context menu api is very nice, as it gets out of the way and works well with dynamic generation and other javascript functions.

Context Menu Demo