跳到正文

配置式菜单与右键菜单

用一个数组描述菜单，再挂到按钮或区域上：分组标题、分隔线、图标、快捷键提示、复选项、单选项、危险项、禁用项、多级子菜单。同一份数组也能做右键菜单。固定写在 HTML 里的简单菜单用「下拉菜单」（data-zh-dropdown）更省事。

带行为 核心包 3 个方法

示例

在这里点右键

在线试用 Markdown 版

代码

<div class="zh-row">
  <button class="zh-btn" id="mn-btn">文件 <i data-i="chevron-down"></i></button>
  <div id="mn-area" class="zh-card" style="padding:16px">在这里点右键</div>
</div>
<script>
  var items = [
    { type: 'group', label: '文件' },
    { label: '重命名', icon: 'pencil', shortcut: 'F2' },
    { label: '移动到', icon: 'folder-open', sub: [{ label: '我的文档' }, { label: '项目归档' }] },
    { type: 'sep' },
    { type: 'check', label: '显示隐藏文件', checked: true },
    { type: 'sep' },
    { label: '删除', icon: 'trash-2', danger: true }
  ];
  ZhaoUI.menu(document.getElementById('mn-btn'), items, { label: '文件操作', onSelect: function (it) { ZhaoUI.message('选择了：' + it.label); } });
  ZhaoUI.contextMenu(document.getElementById('mn-area'), items);
</script>

方法

  • ZhaoUI.menu(button, items, options)：点击按钮打开菜单，返回弹出层句柄（open、close、toggle、isOpen）。options：placement（默认 bottom-start）、label（菜单的 aria-label）、onSelect(item)、onClose()、trigger（click 默认，manual 则自己调用 open）
  • ZhaoUI.contextMenu(area, items, options)：在区域上右键、按 Shift+F10 或菜单键时，在鼠标处（或区域中心）打开菜单。区域会自动可聚焦。options：label、onSelect(item)
  • 菜单项 item：type 取 'sep'（分隔线）、'group'（分组标题，label 为标题）、'check'（复选，点击切换 checked，菜单保持打开）、'radio'（同一 name 的单选，菜单保持打开）；普通项点击后触发 onSelect 并关闭；sub 是子菜单数组

样式类

zh-dd-menu　zh-dd-item　zh-dd-group　zh-dd-sep　zh-dd-lead　zh-dd-label　zh-dd-kbd　zh-dd-caret

无障碍

  • role=menu，项为 menuitem / menuitemcheckbox / menuitemradio，复选与单选带 aria-checked
  • 键盘：↑↓ 移动，输入首字母跳转，→ 进入子菜单，← 回到上一级，Esc 关闭并回到触发按钮，右键菜单关闭后焦点回到区域
  • 打开后第一项自动获得焦点；按钮上按 ↑ 会从最后一项开始
  • 右键菜单只是快捷方式，所有操作也要能在页面里用按钮完成

常见问题

配置式菜单与右键菜单是什么？

用一个数组描述菜单，再挂到按钮或区域上：分组标题、分隔线、图标、快捷键提示、复选项、单选项、危险项、禁用项、多级子菜单。同一份数组也能做右键菜单。固定写在 HTML 里的简单菜单用「下拉菜单」（data-zh-dropdown）更省事。

怎么使用配置式菜单与右键菜单？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

配置式菜单与右键菜单有哪些方法？

ZhaoUI.menu(button, items, options)：点击按钮打开菜单，返回弹出层句柄（open、close、toggle、isOpen）。options：placement（默认 bottom-start）、label（菜单的 aria-label）、onSelect(item)、onClose()、trigger（click 默认，manual 则自己调用 open）；ZhaoUI.contextMenu(area, items, options)：在区域上右键、按 Shift+F10 或菜单键时，在鼠标处（或区域中心）打开菜单。区域会自动可聚焦。options：label、onSelect(item)；菜单项 item：type 取 'sep'（分隔线）、'group'（分组标题，label 为标题）、'check'（复选，点击切换 checked，菜单保持打开）、'radio'（同一 name 的单选，菜单保持打开）；普通项点击后触发 onSelect 并关闭；sub 是子菜单数组。

配置式菜单与右键菜单支持键盘和读屏吗？

role=menu，项为 menuitem / menuitemcheckbox / menuitemradio，复选与单选带 aria-checked；键盘：↑↓ 移动，输入首字母跳转，→ 进入子菜单，← 回到上一级，Esc 关闭并回到触发按钮，右键菜单关闭后焦点回到区域；打开后第一项自动获得焦点；按钮上按 ↑ 会从最后一项开始。

配置式菜单与右键菜单需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。