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 ...

随机推荐

201621123002《JAVA程序设计》第五周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词接口 interface关键字 implements关键字 Comparable abstract Comparator 1.2 ...
ubuntu，day3，awk， vim的使用
本节内容 : 1,awk 2,vim 1,awk # 命令行调用方式 awk [-F field-separator] 'commands' input-file(s) cat /etc/passw ...
NC nc开发工具java虚拟机参数
-Dnc.exclude.modules=${FIELD_EX_MODULES} -Dnc.runMode=develop -Dnc.server.location=${FIELD_NC_HO ...
摹客iDoc「标注」新玩法！这些细节让你爱不释手（201903-2版本更新）
哈喽小伙伴们,我们又见面啦!没错,小摹就是来告诉大家:摹客iDoc又双叒叕升级了!这次又上线了许多新玩法,在此之前,小摹先带大家温习一下iDoc以往的知识点: 攻城狮查看标注的利器 —— 标注信息智能 ...
Python3基础知识之日期时间与字符的转换
问题:“猿类”们都知道,编程中都会涉及到日期.时间类型与字符串类型的转换.不同场景,需要将字符串格式转换为日期类型:也需要将日期类型转换为字符串格式. 目标: 学习和积累python中time和dat ...
vc++ openssl 程序签名
RSA一般有两种应用场景: 1.公钥加密.私钥解密:这是数据安全通信领域最常见情形: 2.私钥加验.公钥验签:这主要用于数字签名. 我们这里用到的是第二种情况: 这里是基于OpenSSL,首先 ...
maven +bootstrap+ssm
http://blog.csdn.net/yangwenxue_admin/article/details/71757505
Java学习笔记43（打印流、IO流工具类简单介绍）
打印流: 有两个类:PrintStream,PrintWriter类,两个类的方法一致,区别在于构造器 PrintStream:构造方法:接收File类型,接收字符串文件名,接收字节输出流(Outpu ...
Java学习笔记35（异常）
代码在运行中发生的问题就是异常 java中把多种异常封装多个类,当程序出现问题时候,就会创建异常类对象并且抛出相关信息异常体系: Throwable类是Java中所有错误或异常的父类 Throwab ...
C语言中const关键字的用法
关键字const用来定义常量,如果一个变量被const修饰,那么它的值就不能再被改变,我想一定有人有这样的疑问,C语言中不是有#define吗,干嘛还要用const呢,我想事物的存在一定有它自己的道理 ...

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

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

随机推荐

热门专题