0

我正在尝试找到一种方法来恢复 jQuery UI 对话框的 dialog() 调用。

我首先在我的应用程序中做的是在 div 上调用对话框，如下所示：

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

然后，一旦用户按下关闭按钮，我希望 div 标记及其内容再次出现在调用 dialog() 之前的相同位置，但不在 jQuery 对话框中。

我试过这个：

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

但它不起作用。调用 dialog('destroy') 时，#dialog 的内容似乎已清空。

有任何想法吗？

谢谢，吉米

4

2 回答 2

1

也许您可以做的是将#dialog 复制到一个新的div，然后将dialog() 复制到那个div，而保持原始状态不变。

于 2013-03-15T18:01:02.700 回答
0

事实上，它比直接的 html() 或 append() 要困难一些，因为在我的 div 中我有一个 jQuery 数据表组件 + 一堆其他自定义事件。所以我首先必须用所有事件深度克隆它的孩子，然后在正确的地方调用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 回答