首页 / HTML / nw.js如何禁止双击最大化?
nw.js如何禁止双击最大化?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了nw.js如何禁止双击最大化?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1795字,纯文字阅读大概需要3分钟。
内容图文
![nw.js如何禁止双击最大化?](/upload/InfoBanner/zyjiaocheng/390/6ae9f68fa42343ccaa49ed9440bcc44e.jpg)
回复内容:
很多时候,我们觉得系统的Frame框很难看,于是想自定义。
自定义Frame的第一步是在package.config文件中将frame选项设置为false。
{
"name": "1",
"main": "index.html",
"nodejs": true,
"single-instance": false,
"chromium-args" : "--enable-webgl --ignore-gpu-blacklist",
"window": {
"show":true,
"title": "AxeSlide",
"toolbar": true,
"width":1000,
"height":400,
"resizable":true,
"show_in_taskbar":true,
"frame":false,
"kiosk":false,
"icon": "resources/img/axeslide.png",
"position":"center"
},
"webkit":{
"plugin":true
}
}
修改配置文件之后,我们看到的是下面的窗口。
无frame窗口是没有办法进行拖拽的,这肯定很不爽了,下面我们可以添加下面的样式到body上,实现整个窗口的拖动。
body {
-webkit-app-region: drag;
}
到此,我们的无边框窗体已经建成了,拖拽窗口的问题已经解决了,一切似乎完美了,就这么简单。不过当我们“手贱”地去双击下窗口的时候,窗口自动最大化了。其实这是nw.js优化过后的一个功能,在早期版本的时候,无边框窗口,双击是没有任何反应的,很多用户提了bug,作者于是添加了这个功能。但是不是任何时候,我们都需要最大化的,比如自定义了一个登录窗,我们想保持固定的大小怎么办?
我首先想到的是监听Click事件,如下:
document.onclick = function (e) {
e.preventDefault();
}
添加之后呢,然而并没有卵用,现在已经确认是nw.js的一个bug,据说在0.13版本修复了,不过还处于beta阶段。
一招不行,再来一招,可不可以通过设置最大,最小宽高都一样的方式解决呢?
继续修改配置文件。
此时我们再次测试,发现双击之后确实没有最大化了,不过窗口的位置却偏移到了屏幕的左上角。
这当然也不是我们需要的,那么就没办法处理了吗?既然默认的处理方式不行,自己动手丰衣足食吧,捕获Click和MouseMove事件,自己实现拖拽也不是很困难的,说干就干。先去掉原来用于body上执行拖拽的样式,然后添加下面的代码。
var gui = require('nw.gui')
var win = gui.Window.get()
var $win = window
var $nav = document.body;
var dragging = false
var mouse_x, mouse_y
var win_x, win_y;
$nav.onmousedown= function (e) {
e = e.originalEvent || e
var isbg = $(e.target).closest('.navbar-nav, #form-user').length < 1
if (!isbg) return
dragging = true
mouse_x = e.screenX
mouse_y = e.screenY
win_x = win.x
win_y = win.y
};
$win.onmousemove=function (e) {
if (!dragging) return
win.x = win_x + (e.screenX - mouse_x)
win.y = win_y + (e.screenY - mouse_y)
};
$win.onmouseup=function () {
dragging = false
};
script>
拖拽前窗口在左上角。
拖拽后。
ok,是不是完美的解决问题了呢?
![](http://www.gxlcms.com/Public/aiod/ts.jpg)
html代码热搜
- disabled不可输入的值无法传递到action层
- html标签中的this使用介绍
- html设置加粗、倾斜、下划线、删除线等字体效果
- html页面嵌套使用示例(frameset使用方法)
- html悬浮框架的设置使用示例(iframe加载html)
- html无序列表标签和有序列表标签使用示例
- 通过CSS实现的html背景色渐变
- 多个div中table的tdwidth设置一样也不法对齐
- html中table为每个单元格设置不同颜色和宽度
- html标准写法与dreamweaver自动生成的不一样
- 将html标签在浏览器居中显示的css样式
- hr水平线样式示例代码
- html中#includefile的用法示例介绍
- 通过css控制HTML文本框中的文字垂直居中
- 使用iframe在网页中嵌入其他网页的方法
- html文件中flash视频格式(flv、swf)文件的嵌入方法
- a链接刷新页面与js刷新页面用法示例介绍
- Form提交表单页面刷新不跳转
- html中使用margin:0auto整个页面不居中的解决方法
- input中id和name属性的区别示例介绍
- iframe子页面操作父页面并实现屏蔽页面弹出层效果
- 如何在textarea文本输入区内实现换行
- html表单属性readonly和disabled的使用方法
- IE网页弹出窗口的常用参数整理可自行设定
- htmldoctype作用介绍
![](http://www.gxlcms.com/ad/tx500x500.jpg)