将code添加到上下文菜单_使用HTML5在您的网站上添加上下文菜单

上下文菜单是在计算机屏幕上单击鼠标右键时列出的菜单。 菜单通常包含一些我们喜欢的重复操作 的快捷方式 ，例如创建或排序文件夹/文件，打开新的应用程序窗口或访问系统偏好设置以更改选项。

多年来，“上下文菜单”驻留在本机应用程序中。 如今，上下文菜单为Web应用带来了很多好处，例如在cPanel的File Manager和Gmail中 。 这些菜单是使用大量JavaScript脚本构建的。

将来，我们也许可以通过HTML5构建上下文菜单以在我们的网站中使用 。 快跟我看看。

建立上下文菜单

HTML5引入了两个新元素， menu和menuitem ，供您构建上下文菜单。 为了使浏览器将menu元素视为“上下文菜单”，我们必须将菜单类型设置为context并为其指定唯一的ID。

下面是一个示例，其中我们创建了一个包含两个项目的上下文菜单。

<menu type="context" id="context-menu-id">
	<menuitem>Edit Content</menuitem>
	<menuitem>Email Selection</menuitem>
</menu>

也可以通过以下方式嵌套menu元素来添加子菜单：

<menu type="context" id="context-menu-id">
	<menuitem>Edit Content</menuitem>
	<menuitem>Email Selection</menuitem>
	<menu label="Share...">
		<menuitem>Facebook</menuitem>
		<menuitem>Twitter</menuitem>
	</menu>
</menu>

现在，要使右键单击时上下文菜单显示在屏幕上，我们使用一个名为contextmenu的新HTML属性。 此属性用于拾取具有指定ID的菜单； 给定上面的示例，我们可以使用contextmenu=context-menu-id定位上下文菜单。

如果要在整个页面上使用上下文菜单，可以在body标签中分配属性。 我们还可以将其添加到HTML元素中，以仅在该元素内使用菜单。

新的上下文菜单将出现在“操作系统”菜单中，如下所示。

添加图标

我敢肯定，你们中的许多人都已经看到了一些上下文菜单，其中带有一个图标。 在某些情况下，图标可能是一种很好的视觉辅助，可以帮助用户快速关联和理解菜单目的 。 另外，它还为用户提供了与新菜单关联的应用程序的线索。

我们还可以使用icon属性轻松地将icon添加到基于HTML5的上下文菜单中，例如：

<menu type="context" id="context-menu-id">
	<menuitem icon="img/edit.png">Edit Content</menuitem>
	<menuitem icon="img/mail.png">Email Selection</menuitem>
	<menu label="Share...">
		<menuitem>Facebook</menuitem>
		<menuitem>Twitter</menuitem>
	</menu>
</menu>

这是我们在浏览器中看到的。

使菜单正常运行

此时，当我们单击新的上下文菜单时，它什么也不做。 但是，使其与裸JavaScript一起运行非常容易。 在我们的示例中，我们有一个名为“电子邮件选择”的菜单。 该菜单将允许用户使用其电子邮件应用程序发送突出显示的文本 。

为了实现这个想法，让我们添加功能以获取用户突出显示的文本。

function getSelectedText() {
	var text = "";
	if(window.getSelection) {
		text = window.getSelection().toString();
	} else if (document.selection && document.selection.type != 'Control') {
		text = document.selection.createRange().text;
	}
	return text;
};

然后，我们再创建一个函数，例如sendEmail（），它将打开电子邮件应用程序。 电子邮件的主题将预先填充文档标题，而电子邮件的内容将填充用户的选定文本。

function sendEmail() {
	var bodyText = getSelectedText();
    window.location.href = 'mailto:?subject='+ document.title +'&body='+ bodyText +'';
};

最后，我们将其添加到具有onclick属性的菜单中，以使其在单击时起作用。

<menuitem icon="img/mail.png" onclick="sendEmail();">Email Selection</menuitem>

过去，我们介绍了如何使用HTML5 EditableContent ，它使我们可以直接从前端编辑Web内容。 我们可以利用此功能，将其添加到名为“编辑内容”的菜单中。

边注

我对这项新功能感到非常兴奋。 我可以看到我们可以使用HTML5上下文菜单构建的事物的许多可能性。 不幸的是，在撰写本文时，只有Firefox实现了此功能。 我希望其他浏览器能尽快赶上。

您可以在下面查看演示（仅适用于Firefox） 。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/html5-contextual-menu/