nw.js node-webkit系列(7)Native UI API Menu的使用
2016-02-25 15:35
781 查看
本节主要介绍Native UI API 中菜单栏的使用,菜单栏分为两类:一类是普通菜单栏,另一类是上下文菜单栏(右键弹出)。
创建一个菜单。如果你不添加参数,将作为一个普通的菜单按钮创建,如果要想作为窗口菜单创建,则需要添加参入如下:
Menu.items
获取该Menu下所有的MenuItem对象,返回结果为数组。例子如下:
Menu.append(MenuItem item)
向当前菜单中添加一个menuitem对象,该对象在整个menuitem集合的尾部。
Menu.insert(MenuItem item, int i)
在menuitem集合的指定位置插入一个menuitem对象。
Menu.remove(MenuItem item)
从menuitem集合中移除一个menuitem对象。
Menu.removeAt(int i)
删除menuitem集合中指定索引位置的menuitem对象。
Menu.popup(int x, int y)
在当前窗口的指定位置弹窗菜单。例子如下:
MenuItem.click
获取或设置一个MenuItem的点击操作
(一)例子
<span style="font-size:14px;"><!DOCTYPE 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' })); document.body.addEventListener('contextmenu', function(ev) { ev.preventDefault(); menu.popup(10, 10); return false; }); </script> </body> </html></span>
(二)函数参考
new Menu([option])创建一个菜单。如果你不添加参数,将作为一个普通的菜单按钮创建,如果要想作为窗口菜单创建,则需要添加参入如下:
new Menu({ <span style="white-space:pre"> </span>type: 'menubar' });
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.append(MenuItem item)
向当前菜单中添加一个menuitem对象,该对象在整个menuitem集合的尾部。
Menu.insert(MenuItem item, int i)
在menuitem集合的指定位置插入一个menuitem对象。
Menu.remove(MenuItem item)
从menuitem集合中移除一个menuitem对象。
Menu.removeAt(int i)
删除menuitem集合中指定索引位置的menuitem对象。
Menu.popup(int x, int y)
在当前窗口的指定位置弹窗菜单。例子如下:
document.body.addEventListener('contextmenu', function(ev) { ev.preventDefault(); menu.popup(ev.x, ev.y); return false; });
MenuItem.click
获取或设置一个MenuItem的点击操作
menu.append(menuitem); menuitem.click = function() { console.log('clicked'); }; console.log(menu.items[0].click);
(三)创建上下文菜单
创建上下文菜单,需要在页面监听contextmenu 事件,然后控制弹出菜单。document.body.addEventListener('contextmenu', function (ev) { ev.preventDefault(); menu.popup(10, 10); return false; });
相关文章推荐
- nw.js实现类似微信的聊天软件
- 解决node-webkit 不支持html5播放mp4视频的方法
- node-webkit打包成exe文件被360误报木马的解决方法
- 关于node-webkit安装程序制作的另一种办法
- 关于node-webkit播放flash问题
- nw.js node-webkit系列(1)简单介绍及应用
- nw.js node-webkit系列(2)nwjs相关教程
- nw.js node-webkit系列(4)Native UI API 概述和应用规范
- nw.js node-webkit系列(5)Native UI API Window的使用
- 使用Sublime快速开发node-webkit客户端程序
- nw.js window下调试项目
- mac nw.js 打包桌面应用程序
- IntelliJ IDEA2017 构建nwjs项目
- HTML,CSS,JS快速编写node-webkit桌面程序,以及package.json详解
- 20170914 nwjs实现模拟图片上传
- 20170913 nwjs的bg-script的坑
- nw.js 开发跨平台应用(1)部署开发环境
- nw.js学习日志(一)
- 我的第一个nw.js爬虫
- Ubuntu下nodewebkit开发环境的安装方法