• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > nw.js 如何禁止双击最大化?

nw.js 如何禁止双击最大化?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含region,webkit,false,frame,drag等相关知识,匿名希望在学习及工作中可以帮助到您
如题:frame设置false后,用-webkit-app-region: drag;实现的拖动,但是如何禁止双击最大化

回复内容:

很多时候,我们觉得系统的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上执行拖拽的样式,然后添加下面的代码。


拖拽前窗口在左上角。


拖拽后。

ok,是不是完美的解决问题了呢?


文章转自我的知乎专栏:http://zhuanlan.zhihu.com/xuanhun/20504162

您可能想查找下面的文章:

  • nw.js 如何禁止双击最大化?

相关文章

  • 2017-08-06利用HTML5绘制点线面组成的3D图形的示例
  • 2018-12-03html5中返回音视频的当前媒体控制器的属性controller
  • 2018-12-03移动端页面布局应该如何操作
  • 2018-12-03基于HTML5 SVG可互动的3D标签云jQuery插件
  • 2018-12-03HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?
  • 2018-12-03 小强的HTML5移动开发之路(9)——坦克大战游戏3
  • 2018-12-03详细介绍HTML5使用Audio标签实现歌词同步的效果
  • 2018-12-03HTML5开发手机应用-详细介绍viewport的作用(图文)
  • 2018-12-03HTML5本地存储之Web Storage应用介绍_html5教程技巧
  • 2018-12-03H5做视频直播

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML插入Flash的全兼容完美解决方案-SWFObject
    • html5和CSS 实现禁止IOS长按复制粘贴功能
    • 如何理解 Web 语义化?
    • input元素的url类型和email类型简介
    • H5表单验证失败该怎样提示
    • 一个模仿微信群聊的H5页面
    • 哪一款 HTML5 编辑器最值得推荐?为什么?
    • 如何利用HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码的功能
    • SVG基础|SVG TEXTPATH 元素
    • Android本地应用打开方法——通过html5写连接

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有