这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

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

内容分类 None.
允许的内容 None, 这是一个 空标签.
标签省略 必须有开始标签和结束标签。
允许的父元素 <menu> 标签, 但元素在弹出状态 (If specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu>must itself be a <menu> in the popup menu state.)
允许的ARIA roles None
DOM 接口 HTMLMenuItemElement

属性

该标签支持全局属性; 特别的, title 常常用来描述命令,或者提供有用的注释。

checked
布尔值,指示是否选择了命令。只能作为属性使用在 checkbox 或 radio中
command
指定一个单独元素的ID,指示要间接调用的命令。在包含属性的菜单项中也不能使用。checkeddisablediconlabelradiogroup 或 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;
}

结果

Specifications

Specification Status Comment
HTML Living Standard
<menuitem>
Living Standard  
HTML 5.1
<menuitem>
Recommendation  

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No Yes81 2 No No No
checked No Yes81 2 No No No
command No Yes81 2 No No No
default No Yes81 2 No No No
disabled No Yes81 2 No Yes3 No
icon No Yes81 2 No No No
radiogroup No Yes81 2 No No No
type No Yes81 2 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support No No Yes81 2 No No No
checked No No Yes81 2 No No No
command No No Yes81 2 No No No
default No No Yes81 2 No No No
disabled No No Yes81 2 No No No
icon No No Yes81 2 No No No
radiogroup No No Yes81 2 No No No
type No No Yes81 2 No No No

1. Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.

2. The <menuitem> element requires a closing tag.

3. This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).

See also

文档标签和贡献者

 此页面的贡献者: wangxuedongovo
 最后编辑者: wangxuedongovo,