Question

所以我希望有一个对话框，最大化，调整大小，最小化，右上角的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>

Answer 1

首先要注意的是，不要使用多个版本的jQuery。您的示例代码有2,2.1.1＆amp; 1.7.0。你必须选一个！

其次，您有HTML语法错误。当您打开<button>时，必须有</button>才能将其关闭，您有</a>。

我对额外的库知之甚少，我不需要它，所以我把它从我的例子中删除了。我做了以下假设：

使用jQuery / jQuery UI向对话框标题栏添加2个按钮
最小化按钮将具有2个功能：
- 应在首次点击时隐藏内容
- 应在第二次点击时恢复内容和位置
最大化按钮将具有2个功能：
- 应将对话框展开到窗口宽度（减去滚动条）和高度首先单击
- 应在第二次单击时将对话框恢复为原始位置和大小
关闭按钮不受影响

这是一个基本的，稍长的啰嗦方法：

＆＃13;

$(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");
  })
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

最后，我们在标题栏中的Close旁边添加Min，Max。我们添加的每个按钮都具有双重功能。为了恢复位置，我们使用.data()来捕获这些详细信息，以便稍后存储该详细信息。

我假设滚动条长度为20px。这可能会因不同的浏览器一个警告是，最小化的项目不会保留它在＆＃34;底部＆＃34;滚动时的窗口。

对话框最大化，最小化，调整大小，响应jquery ui js和扩展对话框js

1 个答案: