Custom right-click menu function in HTML __html

Many of the application systems we use have the right button menu function. But on the top of the page, right click on the general display of IE is the default right-click menu, then how do we implement our own right button menu. The following will explain the implementation principle and implementation code of the right key menu function.

Implementation Principle

In the HTML language, basically each object has a oncontextmenu event, which is the mouse Right-click event (the onclick event is the mouse's left-click event), so we can click on the right mouse button, Let the system pop up a window (this is the popup window, shown at the top of IE, no menu), which shows the menu information we want to display, when we click on one of the items, we perform the action we set, and then close the pop-up window.

Implementation Code

Here's a sample code that I wrote, simulation of a multi-layer div, when we right-click a multiple-layer div, the right button pop-up menu, which has "creat row", "Modify Row", "Delete Row" three menu items, click an item will perform the appropriate action. The following code content:

First, we need to edit a right-click menu and hide it and pop it when needed.

<div id= "Itemmenu" style= "Display:none" > <table border= "1" width= "100%" height= "100%" "bgcolor=" #ccccc C "style=" Border:thin "cellspacing=" 0 "> <tr> <td style=" Cursor:default;bor Der:outset 1 align= "center" onclick= "Parent.create ()" > Creat row </td&
                Gt </tr> <tr> <td style= "Cursor:default;border:outset 1;" align= "Center" O Nclick= "Parent.update ();" > Modify row </td> </tr> <tr > <td style= "Cursor:default;border:outset 1;" align= "center" onclick= "Parent.del ();" > Delete Row </td> </tr> </table

    > </div> Second, list the layers of div on the main page. <div dojotype= "ContentPane" label= "My Widgets" id= "main" onContextMenu = "Javascript:showmenu ();" > <div id= "xml" OnContextMenu = "javascript:showmenu ();"
                    > <div id= "GRP1" class= "module" > Accepts XML box </div> </div> <div id= "database" OnContextMenu = "javascript:showmenu ();"
                    > <div id= "grp3" class= "module" > Accepts DataBase box </div> </div> <div id= "rss" OnContextMenu = "javascript: ShowMenu (); "
                    > <div id= "grp2" class= "module" > Accepts RSS box

           </div> </div> </div> Finally, and also the key part, use JavaScript to write the function section. <script language= "JavaScript" > Function ShowMenu () {Popmen
         U (itemmenu,100, "111");             Event.returnvalue=false;
                      Event.cancelbubble=true;
               return false;

               /** * Display pop-up menu *menudiv: The contents of the right menu *width: The width of the line display *rowcontrolstring: Row control string, 0 for no display, 1 for display, such as "101", means 1th, 3 lines, 2nd line does not show/function Popmenu (Menudi
                   v,width,rowcontrolstring) {//Create pop-up menu var pop=window.createpopup ();

                   Set the contents of the pop-up menu pop.document.body.innerhtml=menudiv.innerhtml;
                   var rowobjs=pop.document.body.all[0].rows;
                   Gets the number of rows in the pop-up menu Var rowcount=rowobjs.length; Loop to set the property for each row for (Var i=0;i<rowobjs.length;i++) {//If the row is not set
                       Shown, the number of lines minus one var hide=rowcontrolstring.charat (i)!= ' 1 ';
             if (hide) {              rowcount--; }//Set whether the line rowobjs[i].style.display= (hide) is displayed?
                      None ":"; Set the effect of the mouse sliding into the row rowobjs[i].cells[0].onmouseover=function () {this.style.ba
                           Ckground= "#818181";
                      this.style.color= "White";

                          //Set the effect of the mouse sliding out of the row rowobjs[i].cells[0].onmouseout=function () {

                          This.style.background= "#cccccc";

                     This.style.color= "BLACK";
                      }//Screen menu pop.document.oncontextmenu=function () {
                return false;
                //Select one of the right-click menu items, the menu hides pop.document.onclick=function () {pop.hide (); }//Show menu Pop.show (event.clientx-1,event.clienty,width, rowcount*25,document.body);
          return true;
          function Create () {alert ("create");
          function Update () {alert ("Update");

          Function del () {alert ("delete");


 } </script>

Summary: The focus of this article is how to implement a custom right-click menu, as well as the operation of the right-menu item. Through the example of this article, I believe you have learned how to use oncontextmenu and popmenu . We also hope that you learn to use examples flexibly.

Reprint please indicate the source: http://www.cnblogs.com/penny/archive/2008/09/11/1288928.html