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

随机推荐

CodeForces - 589D
题目链接:http://codeforces.com/problemset/problem/589/D 思路:将每个人的信息转化为自变量为时间因变量为位置的一元方程.再一个个判断是否相遇. 若两人同向 ...
wincvs配置方法
1．安装wincvs_中文1.3.exe 2．安装cvsnt-2.5.03.2260.msi 安装过程中选择complete选项 3．安装python221-setup.exe 安装完成后,先配置环 ...
消息模式Toast.makeText的几种常见用法
Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于一些帮助 / 提示. Toast 最 ...
php.ini 配置详解
这个文件必须命名为''php.ini''并放置在httpd.conf中的PHPIniDir指令指定的目录中.最新版本的php.ini可以在下面两个位置查看:http://cvs.php.net/vie ...
web集成高德地图
1.使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app 2.页面头引入 <div id="addressMap"> ...
springboot 初始化 web 项目启动报错。。。一直解决不了
1. 一个简单的SpringBoot项目,启动时报错信息: ERROR 18688 --- [cat-startStop-1] org.apache.catalina.core.ContainerBa ...
Note | Markdown
目录一.代码段 1.简单代码 2.大段代码二.块注释 Blockquote 三.标题设置四.字体 1.斜体 2.粗体 3.下划线方案1:行内 HTML 方案2:html的span标签.设置行内 ...
Nextday 参数化单元测试（测试用例）设计
一.首先简单描述一下下载试题及配置试题的过程配置环境:安装Eclipse.JDK(1.7).及考试插件 (net.mooctest....*.jar)等: 登录系统:运行Eclipse: [Mooc ...
机器翻译质量评测算法-BLEU
机器翻译领域常使用BLEU对翻译质量进行测试评测.我们可以先看wiki上对BLEU的定义. BLEU (Bilingual Evaluation Understudy) is an algorithm ...
一次对SNMP服务的渗透测试
Hacking SNMP Service - The Post Exploitation :Attacking Network - Network Pentesting原文地址:http://www. ...

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

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

随机推荐

热门专题