• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <menuitem>

    版本:HTML5废弃

    用户可以通过HTML <menuitem> 元素生成一个弹出式菜单。这包括上下文菜单,以及按钮可能附带的菜单。

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

    内容类别None.
    允许的内容None,这是一个空元素。
    标签省略必须有开始标签和结束标签。
    允许的父元素The<menu>element, where that element is in thepopup menustate.(If specified,thetypeattribute of the<menu>element must bepopup; if missing, the parent element of the<menu>must itself be a<menu>in thepopup menustate.)
    允许的 ARIA rolesNone
    DOM 接口HTMLMenuItemElement

    属性

    该标签支持全局属性;特别地,title常常用来描述命令,或者提供有用的注释。

    • checked布尔值,指示是否选择了命令。只能作为属性使用在checkboxradio中。
    • command指定一个单独元素的ID,指示要间接调用的命令。在包含属性的菜单项中也不能使用。checkeddisablediconlabelradiogrouptype
    • default布尔值,表示使用与菜单主题元素相同的命令。(如buttoninput)。
    • disabled布尔值,表示命令在当前状态下不可用。请注意,禁用与隐藏不同;禁用的属性适用于任何环境变化可能导致命令相关的上下文中。
    • icon图片URL,用于提供图片来表示命令。
    • label展示给用户一个命令的名字,当command属性不存在时是必须的。
    • radiogroup此属性指定要切换为单选按钮时,选定的一组命令的名称。只能作为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;
    }
    

    结果

    上篇:<dir>

    下篇:<content>