|
<!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实现拖动改变大小
2014-02-28
889
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
$(function () {
var gui = require('nw.
目录
相关文章
|
17天前
|
JavaScript
前端开发
UED
|
2月前
|
JSON
JavaScript
前端开发
|
3月前
|
JavaScript
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
47
0
0
|
3月前
|
JavaScript
前端开发
API
|
3月前
|
JavaScript
|
2月前
|
消息中间件
Web App开发
JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解（学习总结---从入门到深化）
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解（学习总结---从入门到深化）
70
0
0
|
10天前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
41
1
1
|
25天前
|
Web App开发
JavaScript
前端开发
js开发：请解释什么是Node.js，以及它的应用场景。
Node.js是基于V8的JavaScript运行时，用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色，如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用（使用Electron）。适用于高性能和实时需求场景。
18
4
5
|
1月前
|
JavaScript
前端开发
Serverless
函数计算新功能— 支持 Node.js 18 、Node.js 20 运行时
从2024年2月起，函数计算正式发布 Node.js 18 运行时和 Nodejs.20 运行时，函数计算2.0和函数计算3.0都支持新的运行时，目前新运行时处在公测状态，欢迎大家来体验。
454
0
0
|
2月前
|
Web App开发
JavaScript
前端开发
构建现代Web应用：Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域，选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势，以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要，我们将通过一个实际的项目示例，展示从搭建项目架构到实现具体功能的整个过程，着重介绍了Vue.js在构建用户友好的界面方面的能力，以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文，读者不仅能够理解Vue.js与Node.js各自的特点，还能学习到如何将这两种技术融合应用，以提升Web应用的开发效率和用户体验。
108
1
1
热门文章
最新文章
1
node的私服中Verdaccio批量发布和手动发布依赖
2
node使用nrm 管理托管node的安装源
3
【Node系列】Express 框架
4
【node】 npm install 报错：code 128
5
node+express搭建服务器环境
6
node版本与npm版本不对应的解决方案
7
NodeJS 安装及环境配置
8
【Node系列】node工具模块
9
【Node系列】Buffer详解
10
ChaosBlade常见问题之创建k8s node-cpu fullload 提示无法找到node如何解决
1
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 内存溢出问题
6
2
JS生成uuid的四种方法
4
3
js实用方法记录-动态加载css/js
9
4
【Js】检查Date对象是否为Invalid Date
5
5
node.js 删除某个目录下所有的文件夹
5
6
node.js输入项目目录结构并展示
2
7
node.js递归拼凑成树形结构
8
8
「一劳永逸」送你21道高频JavaScript手写面试题（上）
19
9
JavaScript的引用数据类型主要包括对象
9
10
js的结构
11
