Как добавить кнопку максимизации и минимизации в диалоговое окно jQuery Basic

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 для добавления функциональных кнопок. Вы просто меняете параметры width и height .dialog() на конкретные значения при нажатии каждой кнопки.

Единственное, что нужно помнить, это то, что вы хотите вызвать 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 и виджеты. Как видите, две кнопки изменяют размер диалога. Если вы хотите, чтобы они делали что-то еще, вы можете легко обновить их функции щелчка, и у вас есть доступ ко всем элементам.

Вы также можете встроить это в собственный виджет с помощью фабрики виджетов (см. РасширениеВиджеты ). Это было бы хорошо, если вы хотите, чтобы многие диалоговые виджеты имели эти функции.