使用按鈕最小化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

回答

相關問題