NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)

简介:

/玄魂

目录

node-webkit教程(6)Native UI API Menu(菜单)

前言

6.1  Menu 概述

6.2  menu api

6.2.1  new Menu([option])

6.2.2  Menu.items

6.2.3 Menu.items.length

6.2.4 Menu.items[i]

6.2.5  Menu.append(MenuItem item)

6.2.6 Menu.insert(MenuItem item, int i)

6.2.7 Menu.remove(MenuItem item)

6.2.8  Menu.removeAt(int i)

6.2.9  Menu.item[x].click

6.2.10  Menu.popup(int x, int y)

6.3 创建右键菜单

6.4  MenuItem

6.4.1 new MenuItem(option)

6.4.2 MenuItem.type

6.4.3  MenuItem.label

6.4.4  MenuItem.icon

6.4.5 MenuItem.tooltip

6.4.6  MenuItem.checked

6.4.7  MenuItem.enabled

6.4.8  MenuItem.submenu

6.4.9  MenuItem.click

6.6 小结

 

前言

几个月前,要开发一个简易的展示应用,要求支持离线播放(桌面应用)和在线播放(web应用)。

当时第一想到的是flex,同一套代码(或者只需少量的更改)就可以同时运行在桌面和浏览器上。由于很多展现效果要全新开发,我想到了impress.js(https://github.com/bartaz/impress.js/)。如果选择impress.js,就意味着要将html5作为桌面应用,当时想到要封装webkit,但是本人对这方面也不是很熟悉,时间也很有限,就又沿着这个方向搜索,找到了node-webkit(https://github.com/rogerwang/node-webkit)

node-webkit解决了我通过htmljs来编写桌面应用的难题

至于node-webkit的定义,按照作者的说法:

 基于node.jschromium的应用程序实时运行环境,可运行通过HTML(5)CSS(3)Javascript来编写的本地应用程序。node.jswebkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代码中直接使用node.jsAPI

6.1  MENU 概述

Menu API 提供的是本地化的窗口菜单,即windows下常说的菜单栏,定义的菜单显示在本地化(nativewindow上,而不是属于DOM文档。参考:node-webkit学习(4)Native UI API windowhttp://www.xuanhun521.com/Blog/2014/4/14/node-webkit%E5%AD%A6%E4%B9%A04native-ui-api-%E4%B9%8Bwindow

Menu分为两种,window菜单和上下文(右键)菜单(context menu)。

创建menu对象使用构造函数Menu([option]),如:

// LOAD NATIVE UI LIBRARY

var gui = require('nw.gui');

// CREATE AN EMPTY MENU

var menu = new gui.Menu();

不带参数构造的menu属于context menu,如果想创建window menu,使用如下方式:

var your_menu = new gui.Menu({ type: 'menubar' });

window menu直接赋值给window 对象的menu属性即可生效。

gui.Window.get().menu = your_menu;

创建menuDemo.htmlpackage.jsonmenuDemo.html代码如下:

<html>

<head>

    <title>menuDemo</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body >

    <h1>menu api 测试</h1>

    <script>

        // Load native UI library

        var gui = require('nw.gui');

        var win = gui.Window.get();

//创建window menu

        var windowMenu = new gui.Menu({ type: 'menubar' });

        var windowSubmenu = new gui.Menu();

        var subMenuItem = new gui.MenuItem({ label: '子菜单项' });

        windowSubmenu.append(subMenuItem);

        windowMenu.append(

            new gui.MenuItem({ label: '子菜单', submenu: windowSubmenu })

            );

        win.menu = windowMenu;

        // Create an empty menu

        var menu = new gui.Menu();

        // Add some items

        menu.append(new gui.MenuItem({ label: 'Item A' }));

        menu.append(new gui.MenuItem({ label: 'Item B' }));

        menu.append(new gui.MenuItem({ type: 'separator' }));

        menu.append(new gui.MenuItem({ label: 'Item C' }));

        // Remove one item

        menu.removeAt(1);

        // Popup as context menu

        menu.popup(10, 10);

        // Iterate menu's items

        for (var i = 0; i < menu.items.length; ++i) {

            var element = document.createElement('div');

            element.appendChild(document.createTextNode(menu.items[i].label));

            document.body.appendChild(element);

        }

    </script> 

</body>

</html>

package.json文件内容如下:

{

  "name": "menu-demo",

  "main": "menuDemo.html",

  "nodejs":true,

  "width":100,

  "height":200,

   "window": {

    "title": "MenuDemo",

    "toolbar": true, 

    "width": 800, 

    "height": 600,

   "resizable":true,

   "show_in_taskbar":true,

   "frame":true,

   "kiosk":false

  },

  "webkit":{

  "plugin":true

  }

}

运行结果如下:

6.2  MENU API

鄙视不标明出处的转载,更多相关内容,欢迎访问玄魂的博客www.xuanhun521.com

6.2.1  new Menu([option])

构造函数,见上文。

6.2.2  Menu.items

获取该Menu下所有的MenuItem对象,返回结果为数组。上文中的例子,有这样的代码:

       for (var i = 0; i < menu.items.length; ++i) {

            var element = document.createElement('div');

            element.appendChild(document.createTextNode(menu.items[i].label));

            document.body.appendChild(element);

        }

上面的代码通过menu.items获取所有menuitem对象,遍历输出label。这里需要注意的是,并不是所有的menuitem都有label属性。

6.2.3 Menu.items.length

menuitem的个数。参加上文demo

6.2.4 Menu.items[i]

通过索引返回一个menuitem对象。

6.2.5  Menu.append(MenuItem item)

向当前菜单中添加一个menuitem对象,该对象在整个menuitem集合的尾部。

6.2.6 Menu.insert(MenuItem item, int i)

menuitem集合的指定位置插入一个menuitem对象。

6.2.7 Menu.remove(MenuItem item)

menuitem集合中移除一个menuitem对象。

6.2.8  Menu.removeAt(int i)

删除menuitem集合中指定位置的menuitem对象。

6.2.9  Menu.item[x].click

设置menuitem集合中指定位置的menuitem对象的click事件,menuDemo.html中添加如下代码:

menu.items[0].click = function() {

     var element = document.createElement('div');

      element.appendChild(document.createTextNode(‘我被点击了’));

            document.body.appendChild(element);

  };

结果如下:

点击前

点击后

6.2.10  Menu.popup(int x, int y)

在当前窗口的指定位置弹窗菜单。示例代码见上文。

6.3 创建右键菜单

创建右键菜单,需要在页面监听contextmenu 事件,然后控制弹出菜单。修改之前的菜单弹出代码:

   document.body.addEventListener('contextmenu', function (ev) {

            ev.preventDefault();

            menu.popup(10, 10);

            return false;

        });

启动时页面如下:

单击右键后,界面显示菜单:

6.4  MENUITEM

鄙视不标明出处的转载,更多相关内容,欢迎访问玄魂的博客www.xuanhun521.com

从上面的叙述中,我们已经知道,menumenuitem的一起组合,才能最终组成界面上的菜单。到目前为止,我们已经基本了解了menuitem的基本使用方法,下面根据api文档,详细介绍属性、方法和事件。

6.4.1 new MenuItem(option)

初始化一个Menuitem对象,其中option是一个对象,包含label, icon, tooltip, type, click, checked, enabled  submenu这些字段。这些字段都具有自己的属性,下面分别叙述。

6.4.2 MenuItem.type

获取一个menuitem的类别信息,到目前为止有三类menuitem,分别为separator, checkbox normal

normalseparator类型的menuitem我们都已经在上面的示例中见到,下面我们添加一个checkbox类型的menuitem

        menu.append(new gui.MenuItem({ label: '请选择',type:'checkbox' }));

结果如下:

需要注意的是,type字段只能在初始化时设定,在运行时是不能修改menuitem的类型的。

6.4.3  MenuItem.label

获取或设置menuitemlabel值,目前只支持纯文本。

6.4.4  MenuItem.icon

菜单的图标,支持app内部的相对路径和系统路径。sepatater类型的menuitem不支持icon属性。只支持png格式的图片。

修改sumMenuItem,为它添加icon

var subMenuItem = new gui.MenuItem({ label: '子菜单项', icon: '2655716405282662783.png' });

效果如下:

6.4.5 MenuItem.tooltip

或者或者设置tooltip字段。所谓tooltip就是当鼠标滑动到菜单上显示的文本信息,类似于DOM元素中的title

下面我们继续修改subMenuItem,为其添加tooltip

        var subMenuItem = new gui.MenuItem({ label: '子菜单项', icon: '2655716405282662783.png',tooltip:'我是帅气的子菜单' });

很不幸,在我的windows 7机器上,tooltip无法显示。在ubuntu上,menubar是显示在全局菜单上,看起来有点怪异:

6.4.6  MenuItem.checked

获取或设置menuitem是否被选中。

6.4.7  MenuItem.enabled

获取或者menuitemenaled属性,enabled设置为falsemenuitem不可被选中。

6.4.8  MenuItem.submenu

获取或者是子菜单。可以参考本文的示例。

6.4.9  MenuItem.click

获取或设置click事件的回调函数。

6.6 小结

本文内容主要参考node-webkit的官方英文文档(https://github.com/rogerwang/node-webkit/wiki/Menuhttps://github.com/rogerwang/node-webkit/wiki/MenuItemhttps://github.com/rogerwang/node-webkit/wiki/Window-menu)。

下一篇文章,介绍Platform Services

鄙视不标明出处的转载,更多相关内容,欢迎访问玄魂的博客www.xuanhun521.com

更多相关内容,欢迎访问玄魂的博客(更多node-webkit相关内容 http://www.xuanhun521.com/Blog/Tag/node-webkit)

原文链接:http://www.xuanhun521.com/Blog/2014/4/16/node-webkit%E6%95%99%E7%A8%8B6native-ui-api-%E4%B9%8Bmenu%E8%8F%9C%E5%8D%95

ps:nw.js,electron交流群 313717550 



本文转自玄魂博客园博客,原文链接:http://www.cnblogs.com/xuanhun/p/3669216.html,如需转载请自行联系原作者

目录
相关文章
|
15天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
17天前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。
|
21天前
|
Web App开发 缓存 JavaScript
【安装指南】nodejs下载、安装与配置详细教程
这篇博文详细介绍了 Node.js 的下载、安装与配置过程,为初学者提供了清晰的指南。读者通过该教程可以轻松完成 Node.js 的安装,了解相关配置和基本操作。文章首先介绍了 Node.js 的背景和应用场景,随后详细说明了下载安装包、安装步骤以及配置环境变量的方法。作者用简洁明了的语言,配以步骤图示,使得读者能够轻松跟随教程完成操作。总的来说,这篇文章为初学者提供了一个友好的入门指南,使他们能够顺利开始使用 Node.js 进行开发。
56 1
【安装指南】nodejs下载、安装与配置详细教程
|
22天前
|
前端开发 测试技术 API
UI自动化与API自动化已经开始互斥了吗?
UI自动化与API自动化已经开始互斥了吗?
|
1月前
|
JavaScript 关系型数据库 MySQL
百度搜索:蓝易云【Node.js写接口连接MySQL数据库教程】
现在,你的Node.js应用已经启动,可以通过访问 `http://localhost:3000/users`来获取所有用户的信息。注意替换上述代码中的数据库连接信息为你自己的实际数据。
28 0
|
1月前
|
缓存 JavaScript Linux
Node.js安装教程
这篇摘要介绍了Node.js的安装教程。首先,文中简要概述了Node.js的定义和用途,突出了其在构建高性能网络应用方面的优势。接着,详细说明了在不同操作系统上安装Node.js的步骤,包括在Windows、Mac和Linux系统上的具体操作指南。文中强调了正确选择版本和使用包管理工具的重要性,以确保安装过程的顺利进行。最后,提供了简单的测试步骤,验证Node.js是否成功安装。这篇摘要为初学者提供了清晰而全面的Node.js安装指南。
34 0
|
2月前
|
存储 JavaScript Linux
百度搜索:蓝易云【CentOS 8上使用NVM安装特定版本的Node.js教程】
现在,你已成功安装和切换到特定版本的Node.js。希望这个教程能够帮助你在CentOS 8上使用NVM安装特定版本的Node.js。
67 2
|
2月前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
27 1
|
2月前
|
机器学习/深度学习 JSON JavaScript
图文讲解 Stable Diffusion API 调用教程
Stable Diffusion 是一个先进的深度学习模型,用于创造和修改图像。这个模型能够基于文本描述来生成图像,让机器理解和实现用户的创意。使用这项技术的关键在于掌握其 API,通过编程来操控图像生成的过程。
|
2月前
|
JavaScript API 网络架构
Node.js RESTful API如何使用?
Node.js RESTful API如何使用?
51 0

相关产品

  • 云迁移中心