menuitem

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

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

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

内容类别	没有。
允许的内容	没有，这是一个空的元素。
标记遗漏	必须有一个开始标签，并且不能有结束标签。
允许父级	<menu>元素，其中该元素处于弹出菜单状态。（如果指定，<menu>元素的type属性必须是popup;如果缺少，<menu>的父元素本身必须是弹出式菜单状态下的<menu>。）
允许ARIA角色	没有
DOM界面	HTMLMenuItemElement

属性

这个元素包含全局属性; 尤其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;
}

结果

规范

Specification	Status	Comment
HTML Living StandardThe definition of '<menuitem>' in that specification.	Living Standard
HTML 5.1The definition of '<menuitem>' in that specification.	Recommendation

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	No support1	8 (8)2	No support	No support	(Yes)3	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	8.0 (8)	No support	No support	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18