?
This document uses PHP Chinese website manual Release
這是一項(xiàng) 實(shí)驗(yàn)技術(shù)
在使用此產(chǎn)品之前，請(qǐng)仔細(xì)檢查瀏覽器兼容性表。
用戶可以通過HTML的<menuitem>標(biāo)簽生成一個(gè)彈出式菜單。這包括上下文菜單，以及按鈕可能附帶的菜單。
這個(gè)標(biāo)簽可以被顯式定義，帶有文本標(biāo)簽和可選圖標(biāo)來描述其外觀，或者作為一個(gè)間接命令，其行為由一個(gè)單獨(dú)的元素定義。命令還可以選擇包含復(fù)選框或分組共享單選按鈕。（<input type="checkbox"> 和 <input type="radio">.)
內(nèi)容類別 | 沒有。 |
|---|---|
允許的內(nèi)容 | 沒有，這是一個(gè)空的元素。 |
標(biāo)記遺漏 | 必須有一個(gè)開始標(biāo)簽，并且不能有結(jié)束標(biāo)簽。 |
允許父級(jí) | <menu>元素，其中該元素處于彈出菜單狀態(tài)。（如果指定，<menu>元素的type屬性必須是popup;如果缺少，<menu>的父元素本身必須是彈出式菜單狀態(tài)下的<menu>。） |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLMenuItemElement |
屬性
這個(gè)元素包含全局屬性; 尤其title可以用來描述命令，或提供使用提示。
checked布爾值，指示是否選擇了命令。只能作為屬性使用在 checkbox 或 radio中。
command指定一個(gè)單獨(dú)元素的ID，指示要間接調(diào)用的命令。在包含屬性的菜單項(xiàng)中也不能使用。checked, disabled, icon, label, radiogroup 或 type.
default布爾值，表示使用與菜單主題元素相同的命令。(如button 或 input).
disabled布爾值，表示命令在當(dāng)前狀態(tài)下不可用。請(qǐng)注意，禁用與隱藏不同；禁用的屬性適用于任何環(huán)境變化可能導(dǎo)致命令相關(guān)的上下文中。icon圖片URL，用于提供圖片來表示命令。
label展示給用戶一個(gè)命令的名字，當(dāng)command 屬性不存在時(shí)是必須的。此屬性指定要切換為單選按鈕時(shí)，選定的一組命令的名稱。只能作為radio的屬性使用。
type這個(gè)屬性指定命令的類型，可以為以下三個(gè)命令之一。
command：一個(gè)有關(guān)聯(lián)動(dòng)作的常規(guī)命令。這是缺省值缺省值。
checkbox：表示可以在兩種不同狀態(tài)之間切換的命令。
radio：表示可以作為單選按鈕切換的一組命令中的一個(gè)選擇。
例子
HTML內(nèi)容
<!-- 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內(nèi)容
div {
width: 300px;
height: 80px;
background-color: lightgreen;}結(jié)果
規(guī)范
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 |