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

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

无边框窗口例子：

（一）设置无边框窗口

只要你在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”元素可以解决这个问题，它可以获取事件的初始化及冒泡事件，例子如下：

	
		
		
		
	
	
		
Btn1
			
Btn2
		
	

（四）文本选择

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

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

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

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