首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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内容

代码语言:javascript
复制
<!-- 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内容

代码语言:javascript
复制
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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com