Many of the application systems we use have the right button menu function. But on the top of the page, the right button is generally displayed is the IE 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, this event is the mouse right-click event (the onclick event is the mouse left-click event), then we can in the right mouse click, let the system pop up a window (this is the popup window, Display in the front of IE, no menu, which shows the menu information we want to display, when we click on one of the items, we execute the action we set, and then close the pop-up window.
Implementation code
Here's a sample code that I wrote, simulate a tree menu, when we right-click a tree menu item, will pop up the right menu, there are "new", "Modify", "delete" three menu items, click an item will perform the appropriate action. If you click the right button elsewhere on the page, only the "Add" menu item is displayed. The following code content:
contextmenudemo.html file
―――――――――――――――――――――――――――――――――
<%--
/**
* Implementation of the right button menu function
*/
--%>
<body oncontextmenu = ShowMenu (') >
<form name = "Menuform" >
<!--hidden box to hold the ID value of the selected menu-->
<input type = "hidden" name = "id" value = ">
<table>
<tr><td><a href= "Javascript:clickmenu ()" OnContextMenu = ShowMenu (' 0 ') > root directory </a></td> </tr>
<tr><td><a href= "Javascript:clickmenu ()" OnContextMenu = ShowMenu (' 1 ') > Menu one </a></td> </tr>
<tr><td><a href= "Javascript:clickmenu ()" OnContextMenu = ShowMenu (' 2 ') > menu two </a></td> </tr>
</table>
</form>
</body>
<!--here to define the right key menu to be displayed-->
<div id= "Itemmenu" style= "Display:none" >
<table border= "1" width= "100%" height= "100%" bgcolor= "#cccccc" style= "Border:thin" cellspacing= "0" >
<tr>
<TD style= "Cursor:default;border:outset 1;" align= "Center" >
New
</td>
</tr>
<tr>
<TD style= "Cursor:default;border:outset 1;" align= "Center" >
Modify
</td>
</tr>
<tr>
<TD style= "Cursor:default;border:outset 1;" align= "Center" >
Delete
</td>
</tr>
</table>
</div>
<!--Right-click menu End-->
<script language= "JavaScript" >
/**
* Display right menu based on incoming ID
*/
function ShowMenu (ID)
{
MenuForm.id.value = ID;
if ("" = ID)
{
Popmenu (itemmenu,100, "100");
}
Else
{
Popmenu (itemmenu,100, "111");
}
Event.returnvalue=false;
Event.cancelbubble=true;
return false;
}
/**
* Show pop-up menu
*menudiv: The contents of the right button menu
*width: Width of line display
*rowcontrolstring: Row control string, 0 for no display, 1 for display, such as "101", indicates 1th, 3 lines, and line 2nd does not show
*/
function Popmenu (menudiv,width,rowcontrolstring)
{
Create a pop-up menu
var pop=window.createpopup ();
Set the contents of a pop-up menu
pop.document.body.innerhtml=menudiv.innerhtml;
var rowobjs=pop.document.body.all[0].rows;
Get the number of rows in a pop-up menu
var rowcount=rowobjs.length;
Loop to set the properties of each row
for (Var i=0;i<rowobjs.length;i++)
{
If you set the row to not display, the number of rows is reduced by one
var Hide=rowcontrolstring.charat (i)!= ' 1 ';
if (hide) {
rowcount--;
}
Set whether the line is displayed
Rowobjs[i].style.display= (hide)? " None ":";
Set the effect of the mouse sliding into the row
Rowobjs[i].cells[0].onmouseover=function ()
{
This.style.background= "#818181";
this.style.color= "White";
}
Set the effect of the mouse to slide out of the row
Rowobjs[i].cells[0].onmouseout=function () {
This.style.background= "#cccccc";
This.style.color= "BLACK";
}
}
Menu of Screen menu
Pop.document.oncontextmenu=function ()
{
return false;
}
When you select an item in the right-click menu, 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" + MenuForm.id.value + "!");
}
function Update ()
{
Alert ("Update" + MenuForm.id.value + "!");
}
Function del ()
{
Alert ("delete" + MenuForm.id.value + "!");
}
function Clickmenu ()
{
Alert ("You click a menu!");
}
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
