node-webkit无边框窗口用纯JS实现拖动改变大小
浏览数：23 /
时间：2015年06月09日
|
<!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> |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
