files/zh-cn/web/html/element/menuitem/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

---
title: <menuitem>
slug: Web/HTML/Element/menuitem
tags:
  - Element
  - HTML
  - HTML5
  - Web
  - 菜单
translation_of: Web/HTML/Element/menuitem
---
<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p>

<p>用户可以通过<strong>HTML <code>&lt;menuitem&gt;</code> 元素</strong>生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。</p>

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th>
   <td>None.</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td>None，这是一个{{Glossary("empty element", "空元素")}}。</td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>必须有开始标签和结束标签。</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>The {{HTMLElement("menu")}} element, where that element is in the <em>popup menu</em> state. (If specified, the <code>type</code> attribute of the {{HTMLElement("menu")}} element must be <code>popup</code>; if missing, the parent element of the {{HTMLElement("menu")}} must itself be a {{HTMLElement("menu")}} in the <em>popup menu</em> state.)</td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA roles</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{DOMxRef("HTMLMenuItemElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>该标签支持<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>；特别地， <code>title</code> 常常用来描述命令，或者提供有用的注释。</p>

<dl>
 <dt>{{HTMLAttrDef("checked")}}</dt>
 <dd>布尔值，指示是否选择了命令。只能作为属性使用在 <code>checkbox</code> 或 <code>radio</code> 中。</dd>
 <dt>{{HTMLAttrDef("command")}}</dt>
 <dd>指定一个单独元素的 ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。<code>checked</code>、<code>disabled</code>、<code>icon</code>、<code>label</code>、<code>radiogroup</code> 或 <code>type</code>。</dd>
 <dt>{{HTMLAttrDef("default")}}</dt>
 <dd>布尔值，表示使用与菜单主题元素相同的命令。（如 <code>button</code> 或 <code>input</code>）。</dd>
 <dt>{{HTMLAttrDef("disabled")}}</dt>
 <dd>布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。</dd>
 <dt>{{HTMLAttrDef("icon")}}</dt>
 <dd>图片 URL，用于提供图片来表示命令。</dd>
 <dt>{{HTMLAttrDef("label")}}</dt>
 <dd>展示给用户一个命令的名字，当 <code>command</code> 属性不存在时是必须的。</dd>
 <dt>{{HTMLAttrDef("radiogroup")}}</dt>
 <dd>此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为 radio 的属性使用。</dd>
 <dt>{{HTMLAttrDef("type")}}</dt>
 <dd>这个属性指定命令的类型，可以为以下三个命令之一。
 <ul>
  <li><code>command</code>：有关联动作的常规命令。这是缺少时的值默认值。</li>
  <li><code>checkbox</code>：代表一个命令可以在两个不同状态之间的切换。</li>
  <li><code>radio</code>：代表一组单选按钮，可切换为命令中的一个选择。</li>
 </ul>
 </dd>
</dl>

<h2 id="例子">例子</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html;">&lt;!-- A &lt;div&gt; element with a context menu --&gt;
&lt;div contextmenu="popup-menu"&gt;
  Right-click to see the adjusted context menu
&lt;/div&gt;

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css;">div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Example", '100%', 80)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>No change from latest snapshot, {{SpecName("HTML5.2")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML5.2")}}</td>
   <td>Snapshot of the {{SpecName("HTML WHATWG")}}, made obsolete.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>Snapshot of the {{SpecName("HTML WHATWG")}}, initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("html.elements.menuitem")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">HTML5 context menus in Firefox (Screencast and Code)</a></li>
</ul>