0

jQuery UI ダイアログの dialog() 呼び出しを元に戻す方法を見つけようとしています。

私がアプリで最初に行っているのは、div でダイアログを呼び出すことです。

$('#dialog').dialog({
...options
});

次に、ユーザーが閉じるボタンを押すと、div タグとそのコンテンツが、jQuery ダイアログではなく、dialog() を呼び出す前と同じ場所に再び表示されるようにします。

私はこれを試しました：

$('#dialog').dialog('close'); 
$('#dialog').show();

しかし、うまくいきません。dialog('destroy') が呼び出されると #dialog の内容が空になるようです。

何か案は？

ありがとう、ジミー

4

2 に答える 2

1

おそらく、あなたができることは、＃dialogを新しいdivに複製し、その1つをdialog（）して、元のdivをそのままにしておくことです。

于 2013-03-15T18:01:02.700 に答える
0

実際、私のdivにはjQueryデータテーブルコンポーネントとその他のカスタムイベントがたくさんあったため、単純なhtml()またはappend()よりも少し難しかったです。そのため、最初にすべてのイベントでその子を深く複製し、次に適切な場所で fadeIn()、fadeOut() を呼び出す必要がありました。だからここに行く：

HTML (#dialog の子は #dialog2 div 内で複製されます):

    <div id="main">
                <div id='dialog'>
                    <input id='input1' type="text"></input>
                    <input id='input2' type="text"></input>
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>
    <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet
             Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</tfoot>
    </table>

                </div>
                <div id='dialog2' style='display:block;'>
                </div>





                <button id="open">Detach Me</button>

JavaScript:

    <script type="text/javascript">
    $(document).ready(function(){

$("#dialog").children().clone(true, true).appendTo($("#dialog2"));
    $('#dialog2').hide();
    $('#open').click(function(){
         $('#dialog2').fadeOut();
         $("#dialog").dialog({
          width: 1000,
          height:800,
          close : function(){
             $('#dialog2').fadeIn();
             return true;
          }
         });
    });

 this.datatable = $('table').dataTable({
   "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $(nRow).on('click', function(){
            $(this).addClass('selected', true);
        });
        }
  });
});

</script>
于 2013-03-16T14:59:04.257 に答える