Ata*_*bev 2 html javascript jquery jquery-ui
所以我想要一个对话框，在右上角有一个最大化、调整大小、最小化、像 windows os 这样的按钮，以及对话框中的响应和可拖动功能。我正在使用 jquery、jquery ui 和扩展对话框框架，但我无法获得我想要的功能。代码也最大化了中心的对话框，但我想要全屏最大化。我仍然是 jquery 和 jquery ui 的初学者，所以我无法真正在这个框架上编码。
$('#window').dialog({
draggable: true,
autoOpen: true,
dialogClass: "test",
modal: true,
responsive: true,
buttons: [
{
text: "minimize",
click: function() {
$(this).parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 50
}, 200);
}
}]
});
$('#open').click(function() {
$('#window').parents('.ui-dialog').animate({
//set the positioning to center the dialog - 200 is equal to height of dialog
top: ($(window).height()-200)/2,
//set the height again
height: 200
}, 200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<meta charset="utf-8">
<title>AXB OS</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.7.0.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://github.com/CrazyTuna/jquery-extendeddialog/blob/master/src/fq-ui.extendeddialog.js"></script>
<head>
</head>
<body>
<div id="window">window</div>
<button id="open" href="javascript: void(0);">maximize</a>
<script>
</script>
<body>
</html>首先要注意的是，不要使用多个版本的 jQuery。您的示例代码有 2、2.1.1 和 1.7.0。你必须选一个！
其次，您有 HTML 语法错误。当你打开 a 时<button>，它必须有一个</button>关闭它，你有</a>。
我不太了解额外的库，我不需要它，所以我从我的例子中删除了它。我做了以下假设：
这是一个基本的，有点冗长的方法来做到这一点：
$(function() {
function addButtons(dlg) {
// Define Buttons
var $close = dlg.find(".ui-dialog-titlebar-close");
var $min = $("<button>", {
class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-minimize",
type: "button",
title: "Minimize"
}).insertBefore($close);
$min.data("isMin", false);
$("<span>", {
class: "ui-button-icon ui-icon ui-icon-minusthick"
}).appendTo($min);
$("<span>", {
class: "ui-button-icon-space"
}).html(" ").appendTo($min);
var $max = $("<button>", {
class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-maximize",
type: "button",
title: "Maximize"
}).insertBefore($close);
$max.data("isMax", false);
$("<span>", {
class: "ui-button-icon ui-icon ui-icon-plusthick"
}).appendTo($max);
$("<span>", {
class: "ui-button-icon-space"
}).html(" ").appendTo($max);
// Define Function
$min.click(function(e) {
if ($min.data("isMin") === false) {
console.log("Minimize Window");
$min.data("original-pos", dlg.position());
$min.data("original-size", {
width: dlg.width(),
height: dlg.height()
});
$min.data("isMin", true);
dlg.animate({
height: '40px',
top: $(window).height() - 50
}, 200);
dlg.find(".ui-dialog-content").hide();
} else {
console.log("Restore Window");
$min.data("isMin", false);
dlg.find(".ui-dialog-content").show();
dlg.animate({
height: $min.data("original-size").height + "px",
top: $min.data("original-pos").top + "px"
}, 200);
}
});
$max.click(function(e) {
if ($max.data("isMax") === false) {
console.log("Maximize Window");
$max.data("original-pos", dlg.position());
$max.data("original-size", {
width: dlg.width(),
height: dlg.height()
});
$max.data("isMax", true);
dlg.animate({
height: $(window).height() + "px",
width: $(window).width() - 20 + "px",
top: 0,
left: 0
}, 200);
} else {
console.log("Restore Window");
$max.data("isMax", false);
dlg.animate({
height: $max.data("original-size").height + "px",
width: $max.data("original-size").width + "px",
top: $max.data("original-pos").top + "px",
left: $max.data("original-pos").top + "px"
}, 200);
}
});
}
$('#window').dialog({
draggable: true,
autoOpen: true,
classes: {
"ui-dialog": "ui-window-options",
"ui-dialog-titlebar": "ui-window-bar"
},
modal: true,
responsive: true,
});
addButtons($(".ui-window-options"));
$("#winOpener").click(function() {
$("#window").dialog("open");
})
});.ui-window-bar .ui-button {
position: absolute;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-window-bar .ui-window-minimize {
right: calc(.3em + 40px);
}
.ui-window-bar .ui-window-maximize {
right: calc(.3em + 20px);
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a href="#" id="winOpener">Open Window</a>
<div id="window" title="Test Window">window</div>最后，我们在标题栏中的 Close 旁边添加 Min、Max。我们添加的每个按钮都有双重功能。为了恢复位置，我们捕获这些细节.data()用于存储该细节以备后用。
我假设20px滚动条长度。这可能因不同的浏览器而异。一个警告是最小化的项目在滚动时不会保留它在窗口“底部”的位置。