网站首页 > 知识剖析正文

HTML 也能开发桌面软件之 NW.js 中的 Menu 菜单类

nixiaole 2024-11-19 08:26:50 知识剖析 20 ℃

在我们的 NW.js 的系列教程中，已经在前面为大家介绍过了：

01）NW.js 是什么?
02）NW.js 中的配置指南
03）NW.js 中的 App 应用程序类
04）NW.js 中的 Window 窗体类

今天我们继续来为大家介绍 NW.js 中的菜单类。

NW.js 中的菜单类 Menu 和 MenuItem 类

NW.js 框架中涉及到菜单的操作主要有两个类，一个是菜单类 Menu，一个是菜单项类 MenuItem。

类名	功能描述
nw.Menu	用于创建和管理应用程序菜单栏和右键上下文菜单的类。
nw.MenuItem	用于创建菜单中的单个项目（如普通菜单项、复选框、分隔符、子菜单）。

现在我们分别列出它们的明细。

Menu 类的成员明细

属性明细：

名称	说明
menu.items	返回当前菜单中的所有菜单项。

方法明细：

名称	说明
new Menu([option])	创建一个新的菜单对象，option 可以指定菜单的类型。
menu.append(item)	将一个 MenuItem 对象添加到菜单的末尾。
menu.insert(item, i)	在指定位置 i 插入一个 MenuItem 对象。
menu.remove(item)	从菜单中移除指定的 MenuItem 对象。
menu.removeAt(i)	移除菜单中指定位置 i 的菜单项。
menu.popup(x, y)	在指定的坐标 (x, y) 位置弹出上下文菜单。
menu.createMacBuiltin(appname, [options])	为 macOS 创建内置的应用程序菜单，并附加到主菜单栏上。

MenuItem 类的成员明细

属性明细：

属性名	描述
type	定义菜单项的类型，如 'normal', 'checkbox', 'separator' 等
label	菜单项显示的文本
icon	菜单项的图标路径
iconIsTemplate	(Mac) 指定图标是否为模板图像
tooltip	(Mac) 鼠标悬停时显示的提示文本
checked	对于 checkbox 或 radio 类型的菜单项，表示是否被选中
enabled	指定菜单项是否可用
submenu	子菜单，可以是 Menu 对象或 MenuItem 数组
key	快捷键
modifiers	与快捷键配合使用的修饰键，如 'ctrl', 'alt', 'shift' 等

方法明细：

方法名	描述
new MenuItem(option)	构造函数，用于创建新的 MenuItem 实例。option 是一个包含上述属性的对象
click	定义菜单项被点击时的回调函数

事件明细：

事件名	描述
click	当菜单项被点击时触发的事件

NW.js 中菜单的代码实例

接下来我们分别给出菜单栏以及右键菜单两个代码实例分别来对其基本的使用进行展示：

菜单栏菜单：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NW.js macOS 自定义菜单示例</title>
</head>
<body>
    <h1>欢迎使用 NW.js macOS 自定义菜单示例</h1>
    <p>请查看屏幕顶部的自定义菜单并尝试点击菜单项！</p>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var gui = nw.require('nw.gui');
        var win = gui.Window.get();

        function showAlert(message) {
            alert(message);
        }

        // 创建菜单栏
        var menubar = new gui.Menu({ type: 'menubar' });

        // 创建应用菜单（macOS 需要）
        var appMenu = new gui.Menu();
        appMenu.append(new gui.MenuItem({
            label: '关于 NW.js App',
            click: function() { showAlert('这是一个 NW.js macOS 自定义菜单示例'); }
        }));
        appMenu.append(new gui.MenuItem({ type: 'separator' }));
        appMenu.append(new gui.MenuItem({
            label: '退出',
            click: function() { 
                if (confirm('确定要退出吗？')) {
                    nw.App.quit(); 
                }
            }
        }));

        menubar.append(new gui.MenuItem({ label: 'NW.js App', submenu: appMenu }));

        // 菜单项1
        var menu1 = new gui.Menu();
        
        menu1.append(new gui.MenuItem({
            label: '菜单项1.1',
            click: function() { showAlert('您点击了 菜单项1.1'); }
        }));
        
        menu1.append(new gui.MenuItem({
            label: '菜单项1.2',
            click: function() { showAlert('您点击了 菜单项1.2'); }
        }));

        var submenu1_3 = new gui.Menu();
        submenu1_3.append(new gui.MenuItem({
            label: '菜单项1.3.1',
            click: function() { showAlert('您点击了 菜单项1.3.1'); }
        }));
        submenu1_3.append(new gui.MenuItem({
            label: '菜单项1.3.2',
            click: function() { showAlert('您点击了 菜单项1.3.2'); }
        }));

        menu1.append(new gui.MenuItem({
            label: '菜单项1.3',
            submenu: submenu1_3
        }));

        menubar.append(new gui.MenuItem({
            label: '菜单项1',
            submenu: menu1
        }));

        // 菜单项2
        var menu2 = new gui.Menu();
        
        menu2.append(new gui.MenuItem({
            label: '菜单项2.1',
            click: function() { showAlert('您点击了 菜单项2.1'); }
        }));
        
        menu2.append(new gui.MenuItem({
            label: '菜单项2.2',
            click: function() { showAlert('您点击了 菜单项2.2'); }
        }));

        menubar.append(new gui.MenuItem({
            label: '菜单项2',
            submenu: menu2
        }));

        // 菜单项3
        var menu3 = new gui.Menu();
        
        menu3.append(new gui.MenuItem({
            label: '菜单项3.1',
            click: function() { showAlert('您点击了 菜单项3.1'); }
        }));
        
        menu3.append(new gui.MenuItem({
            label: '菜单项3.2',
            click: function() { showAlert('您点击了 菜单项3.2'); }
        }));

        menubar.append(new gui.MenuItem({
            label: '菜单项3',
            submenu: menu3
        }));

        // 设置窗口的菜单栏
        win.menu = menubar;

        console.log('菜单已创建');
    });
    </script>
</body>
</html>

截图：

右键菜单：

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NW.js 右键菜单示例</title>
</head>
<body>
    <h1>NW.js 右键菜单示例</h1>
    <p>在此页面的任何位置右键点击以显示自定义菜单。</p>

    <script>
        // 引入 nw.gui 模块
        var gui = require('nw.gui');

        // 创建菜单
        var menu = new gui.Menu();

        // 创建一级菜单项
        var item1 = new gui.MenuItem({
            label: '菜单1',
            click: function() {
                alert('您点击了 菜单1 菜单!');
            }
        });

        // 创建带有子菜单的菜单项
        var submenu = new gui.Menu();
        submenu.append(new gui.MenuItem({
            label: '子菜单1',
            click: function() {
                alert('您点击了 子菜单1 菜单!');
            }
        }));
        submenu.append(new gui.MenuItem({
            label: '子菜单2',
            click: function() {
                alert('您点击了 子菜单2 菜单!');
            }
        }));

        var item2 = new gui.MenuItem({
            label: '菜单2',
            submenu: submenu
        });

        // 创建分隔线
        var separator = new gui.MenuItem({ type: 'separator' });

        // 创建另一个菜单项
        var item3 = new gui.MenuItem({
            label: '菜单3',
            click: function() {
                alert('您点击了 菜单3 菜单!');
            }
        });

        // 将菜单项添加到菜单中
        menu.append(item1);
        menu.append(item2);
        menu.append(separator);
        menu.append(item3);

        // 监听右键点击事件
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            menu.popup(e.x, e.y);
            return false;
        });
    </script>
</body>
</html>

截图：

上一篇： JS原生练习题:第二课第5~12节
下一篇：程序员都必掌握的前端教程之HTML基础教程(下)

猜你喜欢

最近发表

网站首页 > 知识剖析 正文