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

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

  1. node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

    效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...

  2. WPF系列:无边框窗口

    <Window x:Class="Ares.Animations.Window3" xmlns="http://schemas.microsoft.com/winf ...

  3. 让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性

    环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...

  4. Qt5:无边框窗口拖动

    在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...

  5. 【Qt编程】基于Qt的词典开发系列<五>--无边框窗口的拖动

    在上一篇文章中,我们讲述了如何进行无边框窗口的缩放与拖动,而在一些情况下,我们的窗口只需要进行拖动也不需要改变其大小,比如:QQ的登录窗口.本来在上一篇文章中已经讲述了如何进行窗口的拖动,但是却与窗口 ...

  6. 【Qt编程】基于Qt的词典开发系列<四>--无边框窗口的缩放与拖动

    在现在,绝大多数软件都向着简洁,时尚发展.就拿有道的单词本和我做的单词本来说,绝大多数用户肯定喜欢我所做的单词本(就单单界面,关于颜色搭配和布局问题,大家就不要在意了). 有道的单词本: 我所做的单词 ...

  7. [Winform]无边框窗口悬浮右下角并可以拖拽移动

    摘要 简单实现了一个这样的功能,程序启动时,窗口悬固定在右下角,并可以通过鼠标拖拽移动. 核心代码块 无边框窗口并不出现在任务栏 //无边框 this.FormBorderStyle = System ...

  8. 【转】MFC 无边框窗口的拖动

    MFC中无边框窗口的拖动 void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDO ...

  9. Qt 创建圆角、无边框、有阴影、可拖动的窗口 good

    程序窗口的边框,标题栏等是系统管理的,Qt 不能对其进行定制,为了实现定制的边框.标题栏.关闭按钮等,需要把系统默认的边框.标题栏去掉,然后使用 Widget 来模拟它们.这里介绍使用 QSS + Q ...

随机推荐

  1. windows下Anaconda的安装与配置正解

    一.下载anaconda 第一步当然是下载anaconda了,官方网站的下载需要用迅雷才能快点,或者直接到清华大学镜像站下载. 清华大学提供了镜像,从这个镜像下载速度很快,地址: https://mi ...

  2. Java 数组元素合并并去重

    public class TestList { public static void main(String[] args) { Set<Integer> set = new TreeSe ...

  3. STM32 + RC522(SPI2 和 模拟SPI)

    STM32 + RC522(SPI2 和 模拟SPI) 一. STM32 + RC522(SPI2 模式) 1. 头文件: rc522.h #include "stm32f10x.h&quo ...

  4. JavaScript:原生模拟$.ajax以及jsonp

    现实项目中,常常会用到请求,但是在考虑低版本的浏览器时,promise相关的axios,fetch这类第三方库的支持率就不那么好了,再考虑到最大的一个问题,跨域,更是让人头痛,虽然也有fetch-js ...

  5. vue报错TypeError: Cannot read property '$createElement' of undefined

    报错截图: 这个错误就是路由上的component写成了components

  6. linux下设置计划任务执行python脚本

    linux下设置计划任务执行python脚本 简介 crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自 ...

  7. List 接口中ArrayList Vector LinkedList 比较

    访问权限Arryist最快 其次Vector  最慢LinkedList

  8. InternalResourceViewResolver视图解析器(转)

    转载地址:https://www.cnblogs.com/liruiloveparents/p/5054605.html springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就 ...

  9. Vuejs——(4)v-if、v-for

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   (二十)v-if ①标准v-if用法 简单来说,该值为true则显示该标签,为false则不显示 ...

  10. PowerBuilder常用字符串函数

    http://blog.sina.com.cn/s/blog_5995b53d0100a694.html Fill()功能建立一个由指定字符串填充的指定长度的字符串.语法Fill ( chars, n ...