nw.js node-webkit系列(6)Native UI API Frameless window的使用

本节主要讲无边框窗口。Frameless window,是没有操作系统默认样式的边框的窗口,也就意味着最大、最小和关闭按钮也访问不到,同时默认情况下窗口不能被拖拽。但你可以使用上一节的知识对无边框窗口进行操作。

无边框窗口例子:

nw.js node-webkit系列(6)Native UI API Frameless window的使用_第1张图片


(一)设置无边框窗口

只要你在package.json的window区域做如下参数设置,即可设置无边框窗口:

{
  "window": {
    "frame": false,
    "toolbar": false
  }
}

如果打开想在无边框窗口中打开的新窗口也是无边框,则也必须做出以上参数设置:

gui = require('nw.gui');
gui.Window.open('http://google.com',{toolbar:false,frame:false});

(二)使无边框窗口屏幕可拖动

默认情况下,无框窗口是不可拖拽的,可以通过给body添加“-webkit-app-region: drag”样式,来启用拖拽。如果要排除拖动区域的某些不可拖动元素,就使用“-webkit-app-region: no-drag”,目前只支持矩形形状的元素,如button。



注意,如果你把整个窗口拖动,你也必须标记按钮和自定义窗口按钮为不可拖动,否则将对用户点击它们会很辛苦:

button {
  -webkit-app-region: no-drag;
}

如果你只使用自定义标题栏,那么标题栏中的按钮也需要设置no-drag。

其中package.json文件如"toolbar"设为true,设置的标题栏可拖动区域将会被toolbar占据一定位置,所以在无边框中要实现标题栏可拖动最好把"toolbar"设为false。


(三)鼠标事件

一般作为可拖动区域配置的元素将不会发出如mouseenter 或 mousemove事件,这会阻止到:hover这一类的样式触发。有一个方法叫“screen”元素可以解决这个问题,它可以获取事件的初始化及冒泡事件,例子如下:



	
		windowdemo
		
		
	
	
		
Btn1
Btn2

(四)文本选择

关于无边框窗口还有一种情况时拖动行为影响到文本选择,如自制的标题栏里有文本框,拖动标题栏时会偶尔选中文本框,为了防止这种情况发生,你需要在拖动区域禁止文本框的选中功能,例子如下:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}


提醒大家一下,不要滥用拖动区域,尽量用到标题栏中,其他区域能不用则不用。

如果有用到无边框窗口,必须有关闭无边框窗口的操作,可使用函数当前窗口的window.close()。

你可能感兴趣的:(前端集合,nw.js桌面应用开发)