阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML menuitem 标签

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

      这个标签可以被显式定义,带有文本标签和可选图标来描述其外观,或者作为一个间接命令,其行为由一个单独的元素定义。

      命令还可以选择包含复选框或分组共享单选按钮。

      <input type="checkbox"><input type="radio">

      属性

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

      checked

      布尔值,指示是否选择了命令。只能作为属性使用在 checkbox 或 radio 中。

      command

      指定一个单独元素的ID,指示要间接调用的命令。在包含属性的菜单项中也不能使用。checked、disabled、icon、label、radiogroup 或 type。

      default

      布尔值,表示使用与菜单主题元素相同的命令。(如 button 或 input)。

      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;
      }
      

      已废弃 HTML5.2

      该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录