使用按钮最小化JQuery Dialogextend

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

这里是我的jQueryUI的dialogextend对话框

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

这是它的外观

因此，当用户在父页面点击任何地方我希望对话框最小化。有什么建议么？

来源

2017-02-17 Pissu Pusa

因此，经过很长时间的许多失败尝试后，我设法找到了几个这样做的方法。

第一种方法是你添加的$（document）。在方法click事件添加到主分区，它允许你跟踪的网页上的任何点击隐藏对话框如果显示

上述方法的作品，但我认为更好的解决方案将覆盖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方法，所以我可以隐藏和显示对话框，而无需实际关闭对话框。以下解释码头工人。

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

上面将充当泊坞窗，将在对话框被最小化时使用。以下是用于从码头恢复和关闭对话框的功能

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

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

来源

2017-02-21 03:35:13

使用按钮最小化JQuery Dialogextend

回答

相关问题