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>

时间： 2024-07-30 07:38:36

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

全新无边框窗口实现方式(转自yesky)

一种没有边框及菜单栏.工具栏.地址栏.状态栏等的无边框窗口(CW)曾经一度很流行,被很多网站尤其是个人网站所采用,CW也有现成的源码供网友们使用,但是最初的CW使用起来很不方便,有两个JS文件,还要设置一些参数,这对一些初学者来讲是很困难的事情.所以我就有了一个想法:重新写一个全新的无边框窗口,只用一个函数实现,以供网友方便使用. 我给这个全新的无边框窗口起名为NBW,NBW即No Border Window的缩写,只是想区别于CW.这个无边框窗口可以随意拖动.最小化.关闭等等,不仅在IE5/I

【Qt编程】基于Qt的词典开发系列&lt;四&gt;--无边框窗口的缩放与拖动

在现在,绝大多数软件都向着简洁,时尚发展.就拿有道的单词本和我做的单词本来说,绝大多数用户肯定喜欢我所做的单词本(就单单界面,关于颜色搭配和布局问题,大家就不要在意了).有道的单词本: 我所做的单词本: 很明显,两者的主要区别就是周围的边框问题.你可以对比QQ以前的版本和这几年的版本,就会发现都倾向于下面这种窗口模式.下面我们就说说如何用Qt实现无边框窗口的缩放与拖动. 对于无边框窗口的拖动其实很简单,其基本思想是,在鼠标移动前后记录鼠标的坐标,然

【Qt编程】基于Qt的词典开发系列&lt;五&gt;--无边框窗口的拖动

在上一篇文章中,我们讲述了如何进行无边框窗口的缩放与拖动,而在一些情况下,我们的窗口只需要进行拖动也不需要改变其大小,比如:QQ的登录窗口.本来在上一篇文章中已经讲述了如何进行窗口的拖动,但是却与窗口的缩放相关的程序放在一起,下面专门单独分离出来. 窗口的拖放只涉及到鼠标事件:按下操作.释放操作和移动操作,因此只需要重写这三个函数.由于程序比较简单,并且注释也比较详细,就不作过多介绍.新建一个基类为QWidget的Qt Gui应用程序,只需修改widget.h和widg

MFC 无边框窗口

问题描述用MFC无边框窗口建立了三个对话框,一个为主对话框,其他两个为子对话框,为何当我在子对话框中操作完毕关闭子对话框后,点击主对话框中的按钮需要点第二次的时候才有响应呢?求教! 解决方案解决方案二:你仔细检查一下你的代码顺序写错了吧解决方案三:引用1楼nemonwd的回复: 你仔细检查一下你的代码顺序写错了吧检查了,应该没有解决方案四:求高手现身解决方案五:加我qq78122398.我给你改.这个简单解决方案六:要不你贴代码.我看看怎么写的.

无边框窗口代码详解_JSP编程

/*代码思路此代码会以fullscreen方式打开一个空白窗口,然后用window.resize改变其大小. 最后在以写入onload="location.replace='url'"的办法将网址改变. 打开的窗口会是一个带有FRAME的窗口,其中窗口顶端会有一个高22的框架网页. 此网页是用来操纵窗口移动及关闭. */ /*说明代码分两个部分,但总共牵涉到5个HTML文件及4个图像文件第一部分是用来打开窗口,放在哪个文件都无所谓. 第二部分是用来控制窗口的移动及关闭,必须放在指

无边框窗口代码详解

全新无边框窗口的制作的一个例子

<html> <head> <script language=javascript> minimizebar="minimize.gif"; //窗口右上角最小化"按钮"的图片 minimizebar2="minimize2.gif"; //鼠标悬停时最小化"按钮"的图片 closebar="close.gif"; //窗口右上角关闭"按钮"的图片 c

求助无边框窗口的缩放问题

问题描述 C#中formborderstyle为none的窗口怎样实现缩放,用鼠标任意的改变它大小?还有,这种类型的窗口做主窗口时,点击任务栏中标签的时候无法实现最小化,怎么解决?要用到窗口和任务栏的句柄么? 解决方案解决方案二:privateconstintWM_NCHITTEST=0x84;privateconstintHTCLIENT=0x1;privateconstintHTCAPTION=0x2;protectedoverridevoidWndProc(refMessagem){ba

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)_javascript技巧

本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu