|
<!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
916
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
$(function () {
var gui = require('nw.
目录
相关文章
|
17天前
|
Web App开发
JavaScript
前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术，以其高效、灵活著称。本文将介绍 Node.js 的基础概念，包括事件驱动、单线程模型和模块系统；探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信；分析项目结构与开发流程，讨论其优势与挑战，并通过案例展示 Node.js 在实际项目中的应用，旨在帮助开发者更好地掌握这一强大工具。
39
1
1
|
5天前
|
存储
JavaScript
NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版，基于Node.js 22.3.0编写，包含26个实战案例和43个上机练习，旨在帮助读者从基础到进阶全面掌握Node.js技术，适用于初学者、进阶开发者及全栈工程师。
28
9
9
|
1月前
|
JavaScript
前端开发
【Azure Developer】在使用Azure Bot Service JavaScript的实例代码遇见Cannot find module 'node:crypto'
Error: Cannot find module 'node:crypto'
45
6
6
|
1月前
|
JavaScript
前端开发
中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
36
1
1
|
1月前
|
开发框架
JavaScript
前端开发
|
1月前
|
JavaScript
前端开发
开发工具
|
1月前
|
JavaScript
前端开发
持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
35
4
4
|
20天前
|
JSON
JavaScript
前端开发
|
2月前
|
人工智能
JavaScript
前端开发
|
2月前
|
消息中间件
JavaScript
前端开发
热门文章
最新文章
1
3. VPP源码分析（graph node(1))
2
node工具模块
3
【nodejs】让nodejs像后端mvc框架（asp.net mvc ）一样处理请求--路由限制及选择篇（2/8）【route】
4
node.js入门学习
5
Nodejs·进程
6
Node.js开发环境部署
7
node 阻塞和非阻塞
8
Node 项目通过 .npmrc 文件指定依赖安装源
9
nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
10
Node.js开发者有福了！Express 3.0发布
1
React和Next.js开发常见的HTTP请求方法
124
2
JavaScript数据类型归纳，架构师花费近一年时间整理出来的前端核心知识
42
3
前端 JS 经典：ES6 和 CommonJs 用法
41
4
前端 JS 经典：宏任务、微任务、事件循环（EventLoop）
65
5
前端 JS 经典：JSON 对象
43
6
前端 JS 经典：递归
41
7
前端 JS 经典：i，i++，++i区别
59
8
前端 JS 经典：Math 常用方法汇总
92
9
JavaScript：this-关键字，2024中级前端开发面试解答
38
10
前端 JS 经典：let、const、var 区别
39