node-webkit无边框窗口用纯JS实现拖动改变大小
来源：互联网 发布：炒股软件哪款好 编辑：程序博客网 时间：2024/06/10 04:03
<!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> 0 0
- node-webkit无边框窗口用纯JS实现拖动改变大小
- Pyqt实现无边框窗口拖动及改变窗口大小
- Qt无边框窗口实现拖动和改变大小(修改)
- Winform无边框窗口拖动及改变窗口大小
- java中 实现无标题无边框的窗体能够用鼠标拖动改变窗口大小
- 无边框对话框拖动改变大小的实现总结
- QT 无边框可拖动改变size窗口实现
- 实现无边框可拖动调整大小的阴影窗口
- 无边框窗体拖动和改变大小
- 实现无边框时拖动窗口
- C# 无边框窗口实现拖动
- WinForm 无边框窗口 拖动实现
- C# 实现无边框窗口拖动
- 无边框窗口拖动
- 无边框窗体的拖动以及大小改变的实现方式
- Qt 无标题无边框程序的拖动和改变大小
- Qt 无标题无边框程序的拖动和改变大小
- Qt 无标题无边框程序的拖动和改变大小
- 常见排序算法总结与实现（冒泡、插入、选择、希尔、堆排序、归并、快排）
- 数据库学习笔记（三）函数
- Mysql目录结构与docker启动参数
- 5.x AssetBundle初步使用
- Linux系统配置
- node-webkit无边框窗口用纯JS实现拖动改变大小
- ios 倒计时 （离开界面再回来继续）
- centOS7安装时选择了图形化界面，进去的命令，提示需要选择
- 嵌入式心路历程
- 汇编LDR、LDM和STR、STM的区别
- hibernate中对象的瞬时态,持久态,脱管态
- ARM汇编指令——TST和BNE、BEQ解析
- Linux命令之man命令数字含义
- mac下brew安装php扩展swoole失败
