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>
|
node-webkit无边框窗口用纯JS实现拖动改变大小的更多相关文章
- node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...
- WPF系列:无边框窗口
<Window x:Class="Ares.Animations.Window3" xmlns="http://schemas.microsoft.com/winf ...
- 让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性
环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...
- Qt5:无边框窗口拖动
在窗口程序中,无边框窗口程序一般需要特殊处理才能拖动 Qt中,要实现无边框窗口的拖动,需要重新实现 mousePressEvent 和 mouseMoveEvent 俩虚函数 void Widget: ...
- 【Qt编程】基于Qt的词典开发系列<五>--无边框窗口的拖动
在上一篇文章中,我们讲述了如何进行无边框窗口的缩放与拖动,而在一些情况下,我们的窗口只需要进行拖动也不需要改变其大小,比如:QQ的登录窗口.本来在上一篇文章中已经讲述了如何进行窗口的拖动,但是却与窗口 ...
- 【Qt编程】基于Qt的词典开发系列<四>--无边框窗口的缩放与拖动
在现在,绝大多数软件都向着简洁,时尚发展.就拿有道的单词本和我做的单词本来说,绝大多数用户肯定喜欢我所做的单词本(就单单界面,关于颜色搭配和布局问题,大家就不要在意了). 有道的单词本: 我所做的单词 ...
- [Winform]无边框窗口悬浮右下角并可以拖拽移动
摘要 简单实现了一个这样的功能,程序启动时,窗口悬固定在右下角,并可以通过鼠标拖拽移动. 核心代码块 无边框窗口并不出现在任务栏 //无边框 this.FormBorderStyle = System ...
- 【转】MFC 无边框窗口的拖动
MFC中无边框窗口的拖动 void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDO ...
- Qt 创建圆角、无边框、有阴影、可拖动的窗口 good
程序窗口的边框,标题栏等是系统管理的,Qt 不能对其进行定制,为了实现定制的边框.标题栏.关闭按钮等,需要把系统默认的边框.标题栏去掉,然后使用 Widget 来模拟它们.这里介绍使用 QSS + Q ...
随机推荐
- 微信小程序开发 - 用户授权登陆
准备:微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:htt ...
- Alpha 冲刺 (6/10)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...
- SAS DATA步读取数据
上面一节讲了SAS的基本概念,以及语法结构,这次主要讲解SAS DATA步读取数据. 1 ·列表输入 2 ·按列输入 3 ·格式化输入 使用DATA步读取数据的基本形式如下: DA ...
- MFC的停靠窗口中插入对话框,在对话框中添加控件并做控件自适应
单文档程序添加了停靠窗口后,可能会在停靠窗口中添加一些控件.在这里我的做法是在对话框上添加控件并布局,然后将这个对话框插入到停靠窗口中. 步骤 1.插入对话框,在对话框中放入控件(我的为树形控件),并 ...
- python open()函数的模式选择
python open()函数打开文件的模式详解 使用python处理文件时,避免不了要用到open()函数.我们今天主要讨论mode参数的区分. fd = open('文件名(路径)’, mode= ...
- 关于HttpClient,HttpURLConnection,OkHttp的用法
1 HttpClient入门实例 1.1发送get请求 /** * HttpClient发送get请求 * @param url 请求地址 * @return * @throws IOExceptio ...
- XE下显示托盘图标(TrayIcon)
https://www.cnblogs.com/studypanp/p/4930619.html XE下显示托盘图标(TrayIcon) 1.拖一个TrayIcon控件 2.拖一个Applicat ...
- commons-text 生成指定长度的随机字符串
package com.skylink.junge.demo; import java.util.HashSet; import java.util.Set; import org.apache.co ...
- nginx 502错误 upstream sent too big header while reading response header from upstream
原本的设置是 proxy_buffer_size 4k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; 在这种配置下,使用fiddler进行抓包分 ...
- 2017CS231n学习笔记——计算机视觉的概述
本节课主要讲述了cs231n课程的背景和计算机视觉的历史,也主要介绍了目前很重要的一个计算机视觉数据集--IMAGENET. 更多内容参考我的AI学习之路 课程简介 这门课程是由stanford大学计 ...