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

Posted 2023-05-08

【中文标题】如何将最大化和最小化按钮添加到 jQuery 基本对话框

【英文标题】：How to add maximize and minimize button to jQuery Basic Dialog

【发布时间】：2020-03-03 00:12:24

【问题描述】：

我需要在基本的 jQuery 对话框中添加最大化和最小化按钮（应该是功能性的）。请参考以下代码：

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

任何帮助将不胜感激！

【问题讨论】：

"我不想使用任何插件" - 使用 jquery-ui - 选择一个。

TBH，这不仅仅是添加几个按钮。对话框往往被设计为一次性使用（即一次一个），并且具有最小化按钮意味着可以打开多个。然后你需要定位关闭的对话框并处理它被重新打开/移动等。这不是一项小任务，如果有人已经为你完成了，那么你最好的选择是使用他们已经完成的并继续在你的项目中更实用的东西。如果您这样做是为了了解如何操作，那么您可能应该从头开始，而不是使用 jquery-ui。

您希望这些按钮出现在哪里？包含您希望看到的内容以及它们将处于什么状态的图像可能会有所帮助。您希望它们执行什么功能？ “最小化”与“最大化”的区别是什么？

它应该出现在关闭按钮之前的顶部标题栏上。

【参考方案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）。如果您希望许多对话框小部件具有这些功能，这会很好。