Inside Technique : Custom Context Menus using DHTML and XML : Defining your Context Menu

There are four steps beyond including the context menu script on your page. The first step is to define your context menus. The context menus are defined in your page using an XML data-island. To define the contents of your context menu you simply create an XML document and include in the HEAD section of your page. The XML document is of the following shape:

<xml id="contextDef">
  <xmldata>
    <contextmenu id="demo">
      <item id="viewsource" value="View Source"/>
      <item id="back" value="Back..."/>
    </contextmenu>
    <contextmenu id="demob">
      <item id="menu6" value="item6" />
      <item id="menu8" value="item7" />
    </contextmenu>
  </xmldata>
</xml>

The root XML node with the ID of contextDef (case-sensitive) and the XMLDATA node are required. The contextmenu element and the contained item nodes define the context menu. You can define multiple context menus simply by specifying multiple contextmenu blocks. The ID attribute of the contextmenu is used to associate the context menu with different elements on your web-page. The ID attribute of the menu items is used to identify which menu item is selected. All ID's throughout the XML definition must be unique. Therefore, you cannot define a contextmenu with the same ID as a menu-item. The value attribute of the menu-item is the text displayed in the context menu.

So in the above XML data-island, we defined two context menus - demo and demob. The next step is to associate an HTML element with the context menu. This is done simply by assigning the ID of the context menu to a contextmenu attribute on the HTML element. For example, the HTML below would associate a paragraph with the context menu "demo" and an image with the context menu "demob".

  <P contextmenu="demo">Use Demo Context Menu
  <IMG SRC="usedemob.gif" contextmenu="demob">

The last step is to write the script that executes when a context menu-item is selected. Each time a context menu item is selected, the function, fnFireContext, is called and an object representing the element with the current selection is passed in. To process the click, simply create a switch statement that calls the appropriate code for each menu item id. Below is the script that executed from our demonstration on the first page:

function fnFireContext(oItem) {
  switch (oItem.menuid) {
    case "viewsource":
      location.href = "view-source:" + location.href
      break;
    case "back":
      history.back()
      break;
    default:
      alert("You Selected:\nID: " + oItem.menuid + "\nText: " + oItem.innerText)
  }
}

For your context menu, simply modify the switch statement to match your menu item ID's and add the appropriate processing script. These are the three steps necessary to create your custom context menu. Next, we explain the last step which is to include the appropriate code on your web page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.