diff options
Diffstat (limited to 'files/zh-cn/web/html/element/menuitem/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/menuitem/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/menuitem/index.html b/files/zh-cn/web/html/element/menuitem/index.html new file mode 100644 index 0000000000..74bda2d9d9 --- /dev/null +++ b/files/zh-cn/web/html/element/menuitem/index.html @@ -0,0 +1,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><menuitem></code> 元素</strong>生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。</p> + +<p>这个标签可以被显式定义，带有文本标签和可选图标来描述其外观，或者作为一个<em>间接命令</em>，其行为由一个单独的元素定义。命令还可以选择包含复选框或分组共享单选按钮。（<code><input type="checkbox"></code> 和 <code><input type="radio"></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;"><!-- 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> +</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", "<menuitem>")}}</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", "<menuitem>")}}</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", "<menuitem>")}}</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> |