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

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

用户可以通过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.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
checked
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
command
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
default
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
disabled
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
icon
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
radiogroup
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
type
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 8
Notes
Full support 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

文档标签和贡献者

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