第12课：动态创建菜单和上下文菜单

蒙娜丽宁

于 2020-09-22 12:25:10 发布

阅读量767

点赞数

分类专栏： Electron 开发入门文章标签：全栈 Electron 前端

本文链接：https://blog.csdn.net/nokiaguy/article/details/108729646

版权

Electron 开发入门专栏收录该内容

30 篇文章 14 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何在Electron应用中动态创建菜单和上下文菜单。通过MenuItem和Menu对象，可以实现菜单项的动态添加。案例中展示了如何添加初始菜单，以及根据用户输入动态增加菜单项。同时，文章还讲解了如何创建和弹出上下文菜单，提供了相应的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

12.1 动态创建菜单

在很多应用场景需要动态添加菜单项，动态添加菜单项的基本原理就是创建若各个 MenuItem 对象，每一个 MenuItem 对象相当于一个菜单项，然后将 MenuItem 对象逐个添加到 Menu 对象中，Menu 对象相当于带子菜单的菜单项。

本节给一个案例，用来完整阐述如何使用 MenuItem 和 Menu 动态创建菜单。这个案例的功能是首先动态创建最初的菜单，然后通过文本输入一个一个添加菜单项。下面先看一下本例主页面的实现。

index.html

<!DOCTYPE html>
<html>
<head>
  <!--  指定页面编码格式  -->
  <meta charset="UTF-8">
  <!--  指定页头信息 -->
  <title>动态添加菜单</title>
  <script src="event.js"></script>
</head>
<body>
<h1>动态添加菜单</h1>

<button onclick="onClick_AllOriginMenu()">添加最初的菜单</button>
<p/>
菜单文本：<input id="menuitem"/>
<p><input