Html5 development and learning (4): contextmenu -- Right-click menu

Previous: http://www.bkjia.com/kf/201203/124948.html

1, contextmenu
In Html5, each element adds a new attribute: contextmenu
Contextmenu is the context menu, that is, a menu appears when you right-click the element.
 
2, <menu>
To enable right-clicking, a menu appears. You must also understand another element added to html5: <menu>
As the name suggests, <menu> defines menus,
<Menu> element attributes:
Type: menu type.
There are three values
1) context: context;
2) toolbar: tool bar;
3) list: list
Label: The name displayed in the menu.

3, <menuitem>
<Menu> </menu> You can embed a menu item, that is, <menuitem> </menuitem>.
Menuitem attributes:
Label: name displayed for the menu item
Icon: icon displayed on the left of the menu item
Onclick: Click the event triggered by the menu item

4. The following Code demonstrates how to implement a right-click menu:
<Div style = 'display: inline' contextmenu = "mymenu"> right-click and try </div>

<Menu type = "context" id = "mymenu">
<Menuitem label = "menu 1" onclick = "alert ('this is menu 1');" icon = "http://d.lanrentuku.com/down/gif/gif-0145.gif"> </menuitem>
<Menuitem label = "menu 2" onclick = "alert ('this is menu 2');" icon = "http://d.lanrentuku.com/down/gif/gif-0161.gif"> </menuitem>
<Menu label = "menu 3">
<Menuitem label = "menu 3-1" icon = "http://www.bkjia.com/uploadfile/2012/0407/20120407090812492.gif" onclick = "alert ('this is menu 3-1 ');">
</Menuitem>
<Menu label = "menu 3-2">
<Menuitem label = "menu 3-2-1" icon = "http://www.bkjia.com/uploadfile/2012/0407/20120407090813196.gif" onclick = "alert ('here is menu 3-2-1 ');">
</Menuitem>
</Menu>
</Menu>
</Menu>

In this way, when you right-click <div>, the menu effect is as follows:

Note: currently, only Firefox supports <menu>. If you are interested, try Firefox.
 

Author: Xu mingxiang