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


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="../jquery-1.11.0.min.js"></script>

    <link href="../css/bootstrap.min.css" rel="stylesheet" />

    <link href="../css/font-awesome.min.css" rel="stylesheet" />

    <script src="../js/bootstrap.min.js"></script>

    <script>

        $(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>

<body style="overflow:hidden;cursor:initial">

    <div class="panel panel-primary" style="margin: 0px; padding: 0px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;">

        <div class="panel-heading" style="-webkit-app-region: drag; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;">

            <h3 class="panel-title" style="font-weight:bold;">

                UTMP

            </h3>

            <div id="toolBtns" style="float: right; margin-top: -18px; -webkit-app-region: no-drag;">

                <i id="devToolBtn" class="fa fa-puzzle-piece" style="margin:4px; cursor:pointer;"></i>

                <i id="refreshBtn" class="fa fa-refresh" style="margin:4px; cursor:pointer;"></i>

                <i id="minisizeBtn" class="fa fa-minus" style="margin:4px; cursor:pointer;"></i>

                <i id="resizeBtn" class="fa fa-retweet" style="margin: 4px; cursor: pointer;"></i>

                <i id="closeBtn" class="fa fa-times" style="margin-left: 4px; cursor: pointer;"></i>

            </div>

        </div>

        <div class="panel-body" id="frameBody" style="margin: 0px; padding:0px;">

            <span id="a"></span>

            asdfasfd

        </div>

    </div>

</body>

</html>

时间： 2024-09-29 08:19:49

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

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

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

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

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

【Qt编程】基于Qt的词典开发系列&amp;lt;五&amp;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个图像文件 第一部分是用来打开窗口,放在哪个文件都无所谓. 第二部分是用来控制窗口的移动及关闭,必须放在指

无边框窗口代码详解

/*代码思路 此代码会以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