如何将最大化和最小化按钮添加到 jQuery 基本对话框

Question

我需要在基本 jQuery 对话框中添加最大化和最小化按钮（应该可以使用）。请找到以下代码以供参考：

$("#modalDiv").dialog({
  position: {
    my: "center center",
    at: "center center",
    of: window
  },
  width: 1100,
  height: 230,
  modal: true,
  showTitle: true,
  close: function() { }
});

任何帮助将不胜感激！

Answer 1

这可以在 create 回调中完成以添加功能按钮。单击每个按钮时，您只需将 .dialog() 的 width 和 height 选项更改为特定值。

唯一要记住的是，您要在添加按钮时调用 widget。

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    create: function(e, ui) {
      var that = $(this);
      var dlg = $(this).dialog("widget");
      var min = $("<button>", {
          class: "ui-dialog-titlebar-min",
          type: "button",
          title: "Minimize"
        })
        .button({
          icon: "ui-icon-minusthick",
          showLabel: false
        });
      var max = $("<button>", {
          class: "ui-dialog-titlebar-max",
          type: "button",
          title: "Maximize"
        })
        .button({
          icon: "ui-icon-arrowthick-2-ne-sw",
          showLabel: false
        });
      var oSize = {
        width: that.dialog("option", "width"),
        height: that.dialog("option", "height"),
        position: {
          my: "center",
          at: "center",
          of: window
        }
      };
      var mSize = {
        width: $(window).width(),
        height: $(window).height(),
        position: {
          my: "left top",
          at: "left top",
          of: window
        }
      };
      min.click(function(e) {
        that.dialog("option", oSize);
      });
      max.click(function(e) {
        that.dialog("option", mSize);
      });
      $(".ui-dialog-titlebar .ui-dialog-title", dlg).after(min, max);
    }
  });
});

.ui-dialog-titlebar span.ui-dialog-title {
  width: 83%;
}

.ui-dialog-titlebar .ui-dialog-titlebar-min,
.ui-dialog-titlebar .ui-dialog-titlebar-max {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 1px;
  margin: -10px 0 0 0;
}

.ui-dialog-titlebar .ui-dialog-titlebar-max {
  right: 1.75em;
}

.ui-dialog-titlebar .ui-dialog-titlebar-min {
  right: 3.25em;
}

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

<div id="dialog-confirm" title="Confirm">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

此示例使用所有 jQuery UI 元素和小部件。如您所见，这两个按钮改变了对话框的大小。如果您希望他们做其他事情，您可以轻松更新他们的点击功能，并且您可以访问所有元素。

您还可以使用 Widget Factory 将其构建到它自己的小部件中（参见 Extending Widgets）。如果您希望许多对话框小部件具有这些功能，这会很好。

如何将最大化和最小化按钮添加到 jQuery 基本对话框

How to add maximize and minimize button to jQuery Basic Dialog

jquery

jquery-ui

jquery-plugins