node-webkit无边框窗口用纯JS实现拖动改变大小

<!DOCTYPE html>

<head>

$(function () {

var gui = require('nw.gui');

var sizeFlag = true;

var mouseDownFlag = false;

var oldPoint = {};

var dragEventFlag = {};

var sizeSmall = function () {

$("#frameBody").height(600 - 40);

gui.Window.get().moveTo(screen.availWidth / 2 - 400, screen.availHeight / 2 - 300);

gui.Window.get().resizeTo(800, 600);

sizeFlag = false;

}

var sizeMax = function () {

$("#frameBody").height(screen.availHeight - 40);

gui.Window.get().moveTo(0, 0)

gui.Window.get().resizeTo(screen.availWidth, screen.availHeight);

sizeFlag = true;

}

var dragEvent = function (e) {

if (dragEventFlag.leftTop) {

var a = e.pageX - oldPoint.x;

var b = e.pageY - oldPoint.y;

gui.Window.get().moveBy(a, b);

gui.Window.get().resizeBy(0 - a, 0 - b);

$("#frameBody").height($("#frameBody").height() - b);

$("#frameBody").width($("#frameBody").width() - a);

return;

}

if (dragEventFlag.rightBottom) {

var a = e.pageX - oldPoint.x;

var b = e.pageY - oldPoint.y;

gui.Window.get().resizeBy(a, b);

$("#frameBody").height($("#frameBody").height() + b);

$("#frameBody").width($("#frameBody").width() + a);

oldPoint.x = e.pageX;

oldPoint.y = e.pageY;

$("#a").html(a);

return;

}

if (dragEventFlag.rightTop) {

var a = e.pageX - oldPoint.x;

var b = e.pageY - oldPoint.y;

gui.Window.get().moveBy(0, b);

gui.Window.get().resizeBy(a, 0-b);

$("#frameBody").height($("#frameBody").height() - b);

$("#frameBody").width($("#frameBody").width() + a);

oldPoint.x = e.pageX;

$("#a").html(a);

return;

}

if (dragEventFlag.leftBottom) {

var a = e.pageX - oldPoint.x;

var b = e.pageY - oldPoint.y;

gui.Window.get().moveBy(a, 0);

gui.Window.get().resizeBy(0-a, b);

$("#frameBody").height($("#frameBody").height() + b);

$("#frameBody").width($("#frameBody").width() - a);

oldPoint.y = e.pageY;

$("#a").html(a);

return;

}

if (dragEventFlag.left) {

var a = e.pageX - oldPoint.x;

gui.Window.get().moveBy(a, 0);

gui.Window.get().resizeBy(0 - a, 0);

$("#a").html(a);

}

if (dragEventFlag.right) {

var a = e.pageX - oldPoint.x;

gui.Window.get().resizeBy(a, 0);

$("#a").html(a);

oldPoint.x = e.pageX;

oldPoint.y = e.pageY;

}

if (dragEventFlag.top) {

var a = e.pageY - oldPoint.y;

gui.Window.get().moveBy(0, a);

gui.Window.get().resizeBy(0, 0 - a);

$("#frameBody").height($("#frameBody").height() - a);

$("#a").html(a);

}

if (dragEventFlag.bottom) {

var a = e.pageY - oldPoint.y;

gui.Window.get().resizeBy(0, a);

$("#frameBody").height($("#frameBody").height() + a);

$("#a").html(a);

oldPoint.x = e.pageX;

oldPoint.y = e.pageY;

}

$(document).mousemove(function (e) {

if (mouseDownFlag) {

dragEvent(e);

return;

}

if ((e.pageX <= 4 && e.pageY <= 4) || (e.pageX >= ($(document).width() - 4) && e.pageY >= ($(document).height() - 4))) {

$("body").css("cursor", "nw-resize");

return;

}

if ((e.pageX >= ($(document).width() - 4) && e.pageY <= 4) || (e.pageX <= 4 && e.pageY >= ($(document).height() - 4))) {

$("body").css("cursor", "ne-resize");

return;

}

if (e.pageX <= 4 || e.pageX >= ($(document).width() - 4)) {

$("body").css("cursor", "w-resize");

}

else if (e.pageY <= 4 || e.pageY >= ($(document).height() - 4)) {

$("body").css("cursor", "s-resize");

}

else {

$("body").css("cursor", "initial");

}

});

$(document).mousedown(function (e) {

oldPoint.x = e.pageX;

oldPoint.y = e.pageY;

mouseDownFlag = true;

if (e.pageX <= 4 && e.pageY <= 4) {

dragEventFlag.leftTop = true;

return;

}

if (e.pageX >= ($(document).width() - 4) && e.pageY >= ($(document).height() - 4)) {

dragEventFlag.rightBottom = true;

return;

}

if (e.pageX >= ($(document).width() - 4) && e.pageY <= 4) {

dragEventFlag.rightTop = true;

return;

}

if (e.pageX <= 4 && e.pageY >= ($(document).height() - 4)) {

dragEventFlag.leftBottom = true;

return;

}

if (oldPoint.x <= 4) {

dragEventFlag.left = true;

return;

}

if (oldPoint.x >= ($(document).width() - 4)) {

dragEventFlag.right = true;

return;

}

if (oldPoint.y <= 4) {

dragEventFlag.top = true;

return;

}

if (oldPoint.y >= ($(document).height() - 4)) {

dragEventFlag.bottom = true;

return;

}

});

$(document).mouseup(function () {

mouseDownFlag = false;

dragEventFlag.leftTop = false;

dragEventFlag.rightBottom = false;

dragEventFlag.leftBottom = false;

dragEventFlag.rightTop = false;

dragEventFlag.left = false;

dragEventFlag.right = false;

dragEventFlag.top = false;

dragEventFlag.bottom = false;

});

$("#resizeBtn").click(function () {

if (sizeFlag) {

sizeSmall();

} else {

sizeMax();

}

});

$("#minisizeBtn").click(function () {

gui.Window.get().minimize();

})

$("#devToolBtn").click(function () {

gui.Window.get().showDevTools();

});

$("#refreshBtn").click(function () {

window.location.reload();

});

$("#cancelBtn").click(function () {

window.close();

});

$("#toolBtns i").hover(function () {

$(this).css("color", "red");

}, function () {

$(this).css("color", "");

});

$("#closeBtn").click(function () {

gui.Window.get().close();

});

sizeMax();

});

</script>

</head>

UTMP

</h3>

</div>

asdfasfd

</div>

</body>

</html>

node-webkit无边框窗口用纯JS实现拖动改变大小的更多相关文章

node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
效果如下图原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...
WPF系列:无边框窗口
<Window x:Class="Ares.Animations.Window3" xmlns="http://schemas.microsoft.com/winf ...
让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性
环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...
Qt5：无边框窗口拖动
在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...
【Qt编程】基于Qt的词典开发系列<五>--无边框窗口的拖动
在上一篇文章中,我们讲述了如何进行无边框窗口的缩放与拖动,而在一些情况下,我们的窗口只需要进行拖动也不需要改变其大小,比如:QQ的登录窗口.本来在上一篇文章中已经讲述了如何进行窗口的拖动,但是却与窗口 ...
【Qt编程】基于Qt的词典开发系列<四>--无边框窗口的缩放与拖动
在现在,绝大多数软件都向着简洁,时尚发展.就拿有道的单词本和我做的单词本来说,绝大多数用户肯定喜欢我所做的单词本(就单单界面,关于颜色搭配和布局问题,大家就不要在意了). 有道的单词本: 我所做的单词 ...
[Winform]无边框窗口悬浮右下角并可以拖拽移动
摘要简单实现了一个这样的功能,程序启动时,窗口悬固定在右下角,并可以通过鼠标拖拽移动. 核心代码块无边框窗口并不出现在任务栏 //无边框 this.FormBorderStyle = System ...
【转】MFC 无边框窗口的拖动
MFC中无边框窗口的拖动 void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDO ...
Qt 创建圆角、无边框、有阴影、可拖动的窗口 good
程序窗口的边框,标题栏等是系统管理的,Qt 不能对其进行定制,为了实现定制的边框.标题栏.关闭按钮等,需要把系统默认的边框.标题栏去掉,然后使用 Widget 来模拟它们.这里介绍使用 QSS + Q ...

随机推荐

CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
Node.js web发布到AWS ubuntu 之后，关闭Putty，Node 项目也随之关闭的解决办法
最近公司把BlockChain和对应的Node Web都发布到了AWS 的ubuntu 系统上. 但是遇到了一个问题,每次启动 Node Web之后,关闭Putty,Node Web也随之关闭. 由于 ...
Jmeter利用CSV Data Set Config 和 _CSVRead函数实现参数化
测试接口时,当请求参数不是固定的,每次请求对应的参数都是不同的,就需要对请求参数进行参数化.我们这里简单介绍一下5个用户与一个用户建立好友关系. 一.测试需求描述 1. 本次测试的接口为http服务端 ...
进程控制（Note for apue and csapp）
1. Introduction We now turn to the process control provided by the UNIX System. This includes the cr ...
部署GitLab代码托管仓库
GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,GitLab是使用Ryby开发的一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私 ...
使用 PLSQL 连接 Oracle9i 数据库
昨天用了Navicate连接Oracle数据库,不停的掉线,然后死机,只能重启Navicate,没办法,还是用回plsql吧,重装了一遍(之前重装系统后,电脑自带的公司原有的软件没啦) 先安装了Ora ...
第二十一节：Java语言基础-关键字，标识符，注释，常量和变量，运算符
Java语言基础-关键字,标识符,注解,常量和变量,运算符 class Demo { public static void main(String[] args){ System.out.printl ...
AndroidStudio制作底部导航栏以及用Fragment实现切换功能
前言大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...
《http权威指南》读书笔记1
概述最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
Shell-2--输入输出重定向
自己写一下吧,免得又忘了,被人问到,被鄙视 0 表示标准输入, 1 表示标准输出 , 2 表示标准错误输出一个 > 表示已覆盖的方式把命令的正确执行重定向到文件两个 >> 表示是 ...

node-webkit无边框窗口用纯JS实现拖动改变大小

node-webkit无边框窗口用纯JS实现拖动改变大小的更多相关文章

随机推荐

热门专题