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

随机推荐

uni-app开发一次，覆盖多端的前端框架
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 一套代码,运行多个平台 uni-app实现了一套代码, ...
SQL学习（一.索引）
数据库索引作用: 提高查询速度确保数据的唯一性可以加速表和表之间的连接,实现表和表之间的参照完整性使用分组和排序子句进行数据检索时,可以减少分组和排序的时间全文检索字段进行搜素优化分类: ...
shell脚本学习- 传递参数
跟着RUNOOB网站的教程学习的笔记我们可以在执行shell脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n代表一个数字,1为执行脚本的第一参数,2为执行脚本的第二个参数,以此类推... 实 ...
Forward团队-爬虫豆瓣top250项目-项目进度
项目地址:https://github.com/xyhcq/top250 我们的项目是爬取豆瓣top250的电影的信息,在做这个项目前,我们都没有经验,完全是从零开始,过程中也遇到了很多困难,不过我们 ...
2017-2018-1 20155326信息安全系统设计基础》嵌入式C语言课上考试补交
2017-2018-1 20155326信息安全系统设计基础>嵌入式C语言课上考试补交 PPT上的例子已知位运算规则为: &0 --> 清零 &1 --> 不变 | ...
Docker基础-使用Dockerfile创建镜像
1.基本结构 Dockerfile由一行行命令语句组成,并支持以#开头的注释行.例如: # This dockerfile uses the ubuntu image # VERSION 2 - ED ...
.NET Core微服务之路：基于Consul最少集群实现服务的注册与发现（二）
重温Consul最少化集群的搭建
剑指offer编程题Java实现——面试题10二进制中1的个数
题目: 请实现一个函数,输入一个整数,输出该整数二进制表示中1的个数.例如,把9表示成二进制是1001,有2位是1,该函数输出2解法:把整数减一和原来的数做与运算,会把该整数二进制表示中的最低位的1变 ...
用Python进行有进度条的π计算
1.tqdm是一个强大的终端进度条工具,我利用pip获取tqdm函数库. 2编写代码 2.1进行π的计算 from random import random from math import sqrt ...
[CocoaPods]使用Trunk进行设置
CocoaPods Trunk CocoaPods Trunk是一种身份验证和CocoaPods API服务.要将新的或更新的库发布到CocoaPods以进行公开发布,您需要在Trunk中注册并在当前 ...

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

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

随机推荐

热门专题