Custom context menu in HTML

Custom context menu in HTML

Many of our application systems have the right-click menu function. However, on the webpage, right-click is usually the default right-click menu of IE, so how do we implement our own right-click menu? The following describes the implementation principle and code of the right-click menu function.

 

 

Implementation Principle

In HTML, basically every object hasOncontextmenuEvent, which isRight-click event(The onclick event is the left-click event of the mouse), so we can make the system pop up a window when right-clicking the event (this isPopupWindow, which is displayed at the beginning of IE with no menu). The menu information we want to display is displayed. When we click one of them, we will execute the set action, close the dialog box.

 

 

Implementation Code

Below I wrote an example code to simulate a multi-layer Div. When we right-click a multi-layer Div item, the right-click menu will pop up, there are three menu items: "creat row", "Modify row", and "Delete row". Click a menu item to perform the corresponding operation. The following code:

First, you must edit a right-click menu and hide it.

<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"Onclick = "parent. Create ()">
Creat row
</TD>
</Tr>
<Tr>
<TD style = "cursor: default; Border: outset 1;" align = "center" onclick ="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>

Next, list the multi-layer Div on the home 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, it is also the key part. use JavaScript to write functions.

<Script language = "JavaScript">
FunctionShowmenu()
{
Popmenu(Itemmenus, 100, "111 ");
Event. returnvalue = false;
Event. cancelbubble = true;
Return false;
}
/**

* Display the pop-up menu

* Menudiv: Right-click the menu content

* Width: the width of the row display.

* Rowcontrolstring: a row control string. 0 indicates that the row is not displayed. 1 indicates that the row is displayed. For example, "101" indicates that rows 1st and 3 are displayed. Rows 2nd are not displayed.

*/
FunctionPopmenu(Menudiv, width, rowcontrolstring)

{
// Create a menu
VaR Pop = Window. createpopup ();
// Set the content of the pop-up menu
Pop.doc ument. Body. innerhtml = menudiv. innerhtml;

VaR rowobjs?pop.doc ument. Body. All [0]. Rows;
// Obtain the number of rows in the pop-up menu
VaR rowcount = rowobjs. length;
// Set the attributes of each row in a loop
For (VAR I = 0; I <rowobjs. length; I ++)
{
// If this row is not displayed, the number of rows is reduced by one.
VaR hide = rowcontrolstring. charat (I )! = '1 ';
If (hide ){
Rowcount --;
}
// Set whether to display this row
Rowobjs [I]. style. Display = (hide )? "None ":"";
// Set the effect of sliding the mouse into the row
Rowobjs [I]. cells [0]. onmouseover = function (){
This. style. Background = "#818181 ";
This. style. color = "white ";
}
// Set the effect of sliding the mouse over the row
Rowobjs [I]. cells [0]. onmouseout = function (){

This. style. Background = "# cccccc ";

This. style. color = "black ";

}
}
// Unblocking menu
Pop.doc ument. oncontextmenu = function (){
Return false;
}
// Right-click a menu item and choose hide

Pop.doc ument. onclick = function (){
Pop. Hide ();
}
// Display 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: This article focuses on how to implement custom right-click menus and operations on right-click menu items. Through the example in this article, I believe you have learnedOncontextmenuAndPopmenu. We also hope that you will learn how to use instances flexibly.