使用按钮最小化 JQuery Dialogextend

Posted 2023-05-09

【中文标题】使用按钮最小化 JQuery Dialogextend

【英文标题】：Minimize JQuery Dialogextend with a button

【发布时间】：2017-07-06 09:39:28

【问题描述】：

我已经实现了这个 jqueryui dialogextend 对话框。当我使用此对话框上传一些文件并且允许主页用户输入一些数据时，我希望当我单击正文中的任何位置时能够最小化。所以我的问题是如何在用户点击父页面时最小化 dialogextend 对话框（目前它在用户点击最小化按钮时起作用）。

这是我的 jqueryui dialogextend 对话框

$(".myClass").click(function () 
    $("#somediv").dialog(
        width: 400,
        height: 450
    ).dialogExtend(
         "closable": true,
         "maximizable": false,
         "minimizable": true,
         "collapsable": false,
    );
    return false;
    );

这就是它的样子

因此，当用户单击父页面中的任意位置时，我希望对话框最小化。有什么建议？

【参考方案1】：

因此，经过长时间的多次失败尝试，我设法找到了几种方法。

第一种方法是添加一个 $(document).On 方法来向主 div 添加一个点击事件，它允许您跟踪页面上的任何点击并在显示对话框时隐藏它

上述方法有效，但我认为更好的解决方案是覆盖 jquery dialogextend 的最小化和关闭按钮的现有功能，以便在单击按钮时隐藏和显示对话框，并可以使用停靠功能，如如果 dialogboxextend 事件被覆盖，行为也一样。

如果将来有人需要这样做，我就是这样做的。

首先我将创建 jqueryui dialogboxextend 对话框

            $(".myCusClass").click(function ()  
            $("#divDialog").dialog(
                width: 400,
                height: 450
            ).dialogExtend(
                "closable": true,
                "maximizable": false,
                "minimizable": true,
                "restore": false,
                "collapsable": false,
                beforeMinimize: function (event, ui) 
                    event.preventDefault();
                    $("#divDialog").hide();
                    $("#minimizedDiv").show();
                    $("#divDialog").close();
                ,
                beforeRestore: function (event, ui) 
                    event.preventDefault();
                    $("#divDialog").hide();
                    $("#minimizedDiv").hide();
                
            );
            return false;
        );

请注意，我已经覆盖了 beforeminimize 和 beforerestore 方法，因此我可以隐藏和显示对话框，而无需实际关闭对话框。下面解释一下docker。

<div id="minimizedDiv" class="panel  panel-default " style="width: 200px; margin-left: 10px; margin-top: -20px; display: none;">
   <div class="panel-heading top-bar ">
      <span class="ui-dialog-title" style="width: 150px; margin-left: -5px"><b style="vertical-align: top;">Attach files...</b>
      </span>
      <a class="ui-dialog-titlebar-plus ui-corner-all ui-state-default" href="#" title="maximize" role="button" onclick="RestoreWindow()"></a>
      <a class="ui-dialog-titlebar-close ui-corner-all ui-state-default" href="#" title="close" role="button" onclick="CloseWindow()"></a>
   </div>
</div>

以上将作为最小化对话框时使用的泊坞窗。以下是用于从 docker 恢复和关闭对话框的函数

function RestoreWindow() 
        $("#divDialog").show();
        $("#minimizedDiv").hide();
    

function CloseWindow() 
        $('#divDialog').dialog('close');