ボタンでJQuery Dialogextendを最小化する

Question

このjqueryuiダイアログ拡張ダイアログボックスを実装しました。このダイアログボックスを使用していくつかのファイルをアップロードしていて、メインページのユーザーがいくつかのデータを入力できるようにするために、これを最小限に抑える必要があります。だから私の質問は、ユーザーが親ページをクリックするたびにダイアログ拡張ダイアログボックスを最小化する方法です（ユーザーが最小化ボタンをクリックしたときに動作します）。ここ

は私のjqueryui dialogextendダイアログボックスは、これは、ユーザーがどこにも私は、ダイアログボックスを最小化したい親ページ内でクリックしたとき、それはそう

をどのように見えるかです

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

です。助言がありますか？

Answer 1

多くの失敗した試みの長い時間が経過した後、私はこれを行う方法がほとんど見つかりませんでした。

最初の方法は、あなたがそれが前述の

を示している場合は、ページ上の任意のクリックを追跡し、ダイアログボックスを非表示にすることができ、メインのdivにクリックイベントを追加するために$（文書）.Onメソッドを追加することですメソッドは機能しますが、より良い解決策は、ボタンをクリックしたときにダイアログボックスを非表示にして表示することができるようにjqueryのダイアログ拡張の最小化と閉じるボタンの既存の機能をオーバーライドすることで、 dialogboxextendイベントは上書きされます。

これは、将来誰かがそれを行う必要がある場合、これをどのようにしたかです。

まず、私は非表示にし、実際にダイアログを閉じずにダイアログボックスを表示することができますので、私はbeforeminimizeとbeforerestoreメソッドをオーバーライドしている

  $(".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; 
     }); 

予告jqueryui dialogboxextendダイアログボックスを作成します。以下に、ドッカーについて説明します。

<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'); 
    }