Creating a context menu with an XML data island

xml| Menu | create | data

A context menu is a set of commands that a user displays when they right-click on a page. Microsoft's MSDN has a simple example of how to create a custom menu. Here, we'll quickly create a custom context menu from the XML data island. An XML data island is part of the XML data that exists in an HTML document. By using the XML Document Object model [XML DOC model (DOM)], we can easily reference and reference content in XML. We use XML data islands to store multiple definitions of context menus, each of which can be associated with any element in the document. Where there is no definition, the default menu is displayed.
Internet Explorer 5 first presented support for context menus and data islands, and our example is automatically ignored in browsers other than Internet Explorer 5.0 and above. Therefore, if you are using a browser other than Internet Explorer version 5.0 and above, you will not see any effect, only see the browser's default menu. If you are using Internet Explorer 5.0 and above browser, you can click the right mouse button on the page to see the effect. Note: Clicking on images and text will show different menus. Here's an analysis:

First step: Define Menu

The definition menu is done in the document XML data island, and you simply include the XML file in the head section of the HTML document. For example: You can define the following:

<xml id= "Contextdef" >
<xmldata>
<contextmenu id= "Demo" >
<item id= "Viewsource" value= "View source file"/>
<item id= "Back" value= "return to previous page"/>
</contextmenu>
<contextmenu id= "Demob" >
<item id= "menu1" value= "menu item 1"/>
<item id= "menu2" value= "menu item 2"/>
</contextmenu>
</xmldata>
</xml>

In this case, the <xml> root node with the id attribute and the <xmldata> node are required [Note: The capitalization is sensitive in XML]. A ContextMenu node and the multiple item nodes it contains define a menu. If you want to define multiple menus, you can simply define multiple ContextMenu nodes. The id attribute of the ContextMenu node is associated with the corresponding element in the page, and the id attribute of the Item node indicates which menu item is selected by us. It is worth noting that all the ID attributes in the entire XML document cannot be duplicate. The value of the item node is the text to be displayed in the menu.

Step two: relate to elements in HTML

In the above XML data island, we have defined two menu demo and Demob, want to associate with the element in HTML, simply connect the ID value of ContextMenu with the ContextMenu attribute of HTML element.
<p contextmenu= "Demo" > This paragraph shows the contents of the demo menu </P>


Step three: Write the action of clicking on the menu item

When we click each option of the menu, the function fnfirecontext is invoked and a parameter of the object representing the selected menu is passed over. To handle the clicked event, you simply write a simple switch statement that performs different actions based on 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 have selected: \ n" + Oitem.menuid + "\ntext:" +
Oitem.innertext)
}
}

You can change the operation of the mouse click event according to your own needs.

Step Fourth: Define menu appearance

To define the appearance only use a style sheet, we give a complete example, you can copy, paste to see the effect of this example!! [Note: The browser must be ie5+].

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

<style>
. menu{Cursor:hand;
Display:none;
Position:absolute;
top:0; left:0;
Overflow:hidden;
Background-color: "#CFCFCF";
border: "1 solid";
Border-top-color: "#EFEFEF";
Border-left-color: "#EFEFEF";
Border-right-color: "#505050";
Border-bottom-color: "#505050";
font:10pt song body;
margin:0pt;padding:2pt
}

. menu SPAN {width:100%; cursor:hand; padding-left:10pt}
. menu span.selected {background:navy; color:white; Cursor:hand}
</style>

<xml id= "Contextdef" >
<xmldata>
<contextmenu id= "Demo" >
<item id= "Viewsource" value= "View source file"/>
<item id= "Back" value= "retreat ..."/>
<item id= "Meng" value= "visit" The Wonderful World of Mengxian ""/>
<item id= "Calculate" value= "execute JavaScript Code"/>
</contextmenu>
<contextmenu id= "Demob" >
<item id= "menu item Example 1" value= "menu item example 1"/>
<item id= "menu item Example 2" value= "menu item Example 2"/>
</contextmenu>
</xmldata>
</xml>

<SCRIPT>

Defining Global Variables
var Bcontextkey=false;

function Fngetcontextid (EL) {
while (El!=null) {
if (El.contextmenu) return El.contextmenu
El = el.parentelement
}
Return ""
}

function Fndetermine () {
Oworkitem=event.srcelement;

When the menu key on the keyboard is pressed.
if (bcontextkey==true) {

If the status of the menu is False
if (Ocontextmenu.getattribute ("status") = = "false") {

Captures mouse events to interact with the page.
Ocontextmenu.setcapture ();

Depending on the mouse position, determine the menu location.
Ocontextmenu.style.top=event.clienty + Document.body.scrollTop +
1;
Ocontextmenu.style.left=event.clientx + Document.body.scrollLeft +
1;
Ocontextmenu.innerhtml= "";

Set menu ' status ' to ' true '
var scontext = Fngetcontextid (event.srcelement)
if (scontext!= "") {
Fnpopulate (Scontext)
Ocontextmenu.setattribute ("Status", "true");
Event.returnvalue=false;
}
Else
Event.returnvalue=true
}
}
else{

If the keyboard menu key is not pressed, and the menu's status is true.
if (Ocontextmenu.getattribute ("status") = = "true") {
if ((oworkitem.parentelement.id== "Ocontextmenu") &&
(Oworkitem.getattribute ("component") = = "MenuItem")) {
Fnfirecontext (Oworkitem)
}

Reset Menu (hide) when the mouse leaves the menu or clicks the menu item

Ocontextmenu.style.display= "None";
Ocontextmenu.setattribute ("Status", "false");
Ocontextmenu.releasecapture ();
Ocontextmenu.innerhtml= "";
Event.returnvalue=false;
}
}
}


function Fnpopulate (SID) {
var str= ""
var elmenuroot =
Document.all.contextDef.XMLDocument.childNodes (0). Selectsingle
Node (' contextmenu[@id = ' + SID + '] ')
if (elmenuroot) {
for (Var i=0;i<elmenuroot.childnodes.length;i++)
str+= ' <span component= ' MenuItem ' menuid= ' +
Elmenuroot.childnodes[i].getattribute ("id") +
' Id=omenuitem ' + i + ' > ' +
Elmenuroot.childnodes[i].getattribute ("value") +
"</SPAN><BR>"
OCONTEXTMENU.INNERHTML=STR;
ocontextmenu.style.display= "Block";
OContextMenu.style.pixelHeight = Ocontextmenu.scrollheight
}
}

function Fnchirpon () {
if ((event.clientx>0) && (event.clienty>0)
&& (Event.clientx<document.body.offsetwidth)
&& (Event.clienty<document.body.offsetheight)) {
Oworkitem=event.srcelement;
if (Oworkitem.getattribute ("component") = = "MenuItem") {
Oworkitem.classname = "Selected"
}
}
}
function Fnchirpoff () {
if ((event.clientx>0) && (event.clienty>0) &&
(event.clientx<document.body.offsetwidth) &&
(Event.clienty<document.body.offsetheight)) {
Oworkitem=event.srcelement;
if (Oworkitem.getattribute ("component") = = "MenuItem") {
Oworkitem.classname = ""
}
}
}

function Fninit () {
if (Ocontextmenu) {
ocontextmenu.style.width=180;
OCONTEXTMENU.STYLE.HEIGHT=DOCUMENT.BODY.OFFSETHEIGHT/2;
ocontextmenu.style.zindex=2;

Set Menu Styles
document.oncontextmenu=fnsuppress;
}
}

function Fnincontext (EL) {
while (El!=null) {
if (el.id== "Ocontextmenu") return True
El = el.offsetparent
}
return False
}

function fnsuppress () {
if (!) ( Fnincontext (event.srcelement))) {
Ocontextmenu.style.display= "None";
Ocontextmenu.setattribute ("Status", "false");
Ocontextmenu.releasecapture ();
Bcontextkey=true;
}

Fndetermine ();
Bcontextkey=false;
}

function Javameng () {
window.open ("http://lucky.myrice.com", "_blank", "width=400,height=
400,top=20,left=20 ")
}

function Fnfirecontext (oitem) {

Customizing the functionality of context menu items
Switch (OITEM.MENUID) {
Case "Viewsource":
Location.href = "View-source:" + location.href
Break
Case "Back":
History.back ()
Break
Case "Meng":
location.href= "Http://lucky.myrice.com"
Break
Case "Calculate":
Javameng ()
Break
Default
Alert ("You click on the menu item is: \n\n\n" + Oitem.menuid + "Ah!!! ")
}
}
</SCRIPT>

<body onload= "Fninit ()" onclick= "Fndetermine ()" bgcolor= "#ccffcc" >
<div status= "false" Onmouseover= "Fnchirpon ()" onmouseout= "Fnchirpoff ()" id= "Ocontextmenu" class= "menu" ></ Div> here to put you any other things! ... <br> Let's put you any other things here! ... <br> Let's put you any other things here! ...<br><br>
<p contextmenu= "Demo" > here is the use of contextual menu of the lining! You move the mouse here, and then click the mouse button, you can see the menu content! <br> here is the use of the context menu of the lining! You move the mouse here, and then click the mouse button, you can see the menu content! <br> here is the use of the context menu of the lining!
You move the mouse here, and then click the mouse button, you can see the menu content! <br> here is the use of the context menu of the lining! You move the mouse here, and then click the mouse button, you can see the menu content! <br> here is the use of the context menu of the lining! You move the mouse here, and then click the mouse button, you can see the dish
Single Content! <br></p><p> You can also put the mouse to the following image above, click and button! <p>
<center>contextmenu= "Demob" >
</body>

It is important to note that you can also define the menu's invalid or dimmed operation or further define a submenu at a lower level. This has to be left to your own practice! ：）