Create a context menu with XML data island

Create a context menu with XML data island

The context menu is a set of commands displayed when the user is right-click on the page. Microsoft's MSDN has a simple example for how to build a custom menu. Here, we will quickly create a custom context menu via XML's data island. XML data island is part of XML data existing in the HTML document. With XML Document Object Model [XML Document Object Model (DOM)], we can easily refer to and reference the contents of XML. We use the XML data island to store multiple definitions of the context menu, each of which can be associated with any of the documents. Where you are not defined, the default menu will be displayed. Internet Explorer 5.0 first proposes support for context menu and data island, and our example will be automatically ignored in a browser in Internet Explorer 5.0 and above. Therefore, if you use the browser that is not the version of Internet Explorer 5.0 and above, you will see any effect and you can only see the browser's default menu. If you are using a browser of Internet Explorer 5.0 and or more, you can click on the right mouse button on the page. Note: Different menus will be displayed by clicking on images and text. Let's analyze: Step 1: Define the menu definition menu is done in the Document XML data island, you only need to include an XML file in the HTML document's head section. For example: can be defined as follows: Here, the root node and node with id attribute are required [Note: Large write in XML is sensitive]. A ContextMenu node defines a menu with multiple ITEM nodes it contains. If you want to define multiple menus, you only need to define multiple ContextMenu nodes. The ID attribute of the ContextMenu node is associated with the corresponding elements in the page, the ID attribute of the ITEM node indicates which menu item is selected. It is worth noting that all ID attributes cannot be renamed throughout the XML document. The value of the ITEM node is the text to be displayed in the menu. Step 2: And the elements in HTML are associated with the above XML data island, we define two menus Demo and Demob, want to associate with the elements in HTML, just simply put the IDMENU ID and HTML The ContextMenu property of the element can be connected.

This paragraph shows the content of the Demo menu Step 3: Writing actions to click on the Menu item When we click When each option of the menu, the function FnfireContext is called and passes an object parameter representing the selected menu. To process events, simply write simple Switch statements, perform different operations according to different ID values. For example: Function FnfireContext (OITEM) {switch (OITEM.MENUID) {CASE "ViewSource": location.href = "View-source:" location.href break; case "back": history.back () Break; default: Alert ("You choose: / n" OITEM.MENUID "/ NTEXT:" OITEM.INNERTEXT)} You can change the operation of the mouse click event according to your needs. Step 4: Define the appearance of the menu to define the appearance. Simply use the style. Let's give a complete example, you can copy, paste to see this example! ! [Note: The browser must be IE5 ].