In HTML5, the original right-click menu creation method, and the html5 right-click menu

In HTML5, the original right-click menu creation method, and the html5 right-click menu

Even if JavaScript is disabled, these shortcut menus can still be displayed normally. Therefore, if you want to respect your choice, the best way is to use JavaScript to create these menu elements and inject them into the DOM elements. In this way, when JavaScript is disabled, these shortcut menus are not displayed.

There is a good thing that is ignored in the HTML5 specification, that is, the right-click menu. In HTML5, right-click menus are displayed in a standard way. programmers can generate right-click menus by creating simple HTML5menu and menuitem tags. The menu is only displayed in the right-click menu of the specified area. Therefore, you do not need to create a browser plug-in to achieve this effect. Next let me show you how to use basic HTML tags to create a personalized right-click menu!

HTML code

First, we define an HTML area and assign it an ID. Then we need to use this ID:

Copy XML/HTML Code to clipboard

1. <Section contextmenu = "mymenu">
2. <! --
3. To make the code clear and tidy
4. I will put the menu inside this element.
5. -->
6. </Section>

After this element is defined, let's create a real menu element:

Copy XML/HTML Code to clipboard

1. <Menu type = "context" id = "mymenu">
2. <Menuitem label = "reload this article" onclick = "window. location. reload ();" icon = "/images/refresh-icon.png"> </menuitem>
3. <Menuitem label = "Jump to comments area" onclick = "window. location = '# comments';" icon = "/images/comment_icon.gif"> </menuitem>
4. <Menu label = "share this article to..." icon = "/images/pai_icon.gif">
5. <Menuitem label = "Sina Weibo" icon = "/images/twitter_icon.gif" onclick = "goTo ('// twitter.com/intent/tweet? Text = '+ document. title +': '+ window. location. href); "> </menuitem>
6. <Menuitem label = "qqspace" icon = "/images/facebook_icon16x16.gif" onclick = "goTo ('// facebook.com/sharer/sharer.php? U = '+ window. location. href); "> </menuitem>
7. </Menu>
8. </Menu>

Note that the ID of the menu mark here is the same as the value in the contextmenu above, these shortcut menus are displayed only when you right-click the section area above. You can configure menu names, menu icons, and onclick events to declare their meanings and actions. An action can be a pre-defined JavaScript action or an inline JavaScript code. The same menu can be placed in multiple areas of the page without repeated creation.

Currently, only Firefox is the only browser that implements this API. I generally do not like to put some important functions in the context menu, but it is very convenient to have such functions. The purpose of this API is to improve ease of use without any negative impact. The sharing function I placed in the menu is a good example. I believe you often use right-click menus in your projects, right?