menuitem

这是一项 实验技术

在使用此产品之前，请仔细检查浏览器兼容性表。

用户可以通过HTML的<menuitem>标签生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。

这个标签可以被显式定义，带有文本标签和可选图标来描述其外观，或者作为一个间接命令，其行为由一个单独的元素定义。命令还可以选择包含复选框或分组共享单选按钮。（<input type="checkbox"> 和 <input type="radio">.)

属性

这个元素包含全局属性; 尤其title可以用来描述命令，或提供使用提示。

checked布尔值，指示是否选择了命令。只能作为属性使用在 checkbox 或 radio中。

command指定一个单独元素的ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。checked, disabled, icon, label, radiogroup 或 type.

default布尔值，表示使用与菜单主题元素相同的命令。(如button 或 input).

disabled布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。icon图片URL，用于提供图片来表示命令。

label展示给用户一个命令的名字，当command 属性不存在时是必须的。此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为radio的属性使用。

type这个属性指定命令的类型，可以为以下三个命令之一。

• command：一个有关联动作的常规命令。这是缺省值缺省值。

• checkbox：表示可以在两种不同状态之间切换的命令。

• radio：表示可以作为单选按钮切换的一组命令中的一个选择。

例子

HTML内容

<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr>
  <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr>
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>

CSS内容

div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

结果

规范

浏览器兼容性