Question

我遇到了JQuery Dialog的问题。

我有这段代码:(在点击名为Maximize的第二个按钮之前，最初是一个简单的DIV）

单击“最大化”后，可见的div变为对话框。但是当我想返回div（初始状态）时，它不再出现在屏幕上。在文档中，有“完全删除对话框功能。这将使元素返回到其初始化前状态。”

我有javascript代码：

           function makeit(data,maximize,minimize)
            {
                $(data).dialog();
                $(maximize).hide();
                $(minimize).show();
            }

            function remakeit(data,maximize,minimize)
            {
                $(data).dialog("destroy");
                $(maximize).show();
                $(minimize).hide();
            }

“破坏”是一个很好的选择还是需要我改回DIV元素？

谢谢

Answer 1

看起来您的问题是，在您调用 dialog.destroy（）之后，jQuery UI确实将元素返回到其初始化前状态，但是使其具有显示：无设置。

这样：

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).show();

            }

我认为你遇到的问题是因为jquery UI的设计者意味着对话框div充当对话框div，而不是播放两个部分 - 对话框div和常规DOM div。

所以，你有两个选择：

1）继续你迄今为止的方式（尝试使用相同的div作为对话框div和常规DOM div） - 在这种情况下，你必须通过jquery UI做什么。如果你说它“将div返回到它的pre-init状态”它会附加到正文的末尾（作为“页脚”），然后在重新创建函数之后 $（data）.show（）; 语句，添加一个语句将div移动到原来的位置：

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).appendTo("#originalDialogContainer");
                $(data).show();
            }

其中 #originalDialogContainer“是最初包含div的div：

<div id="originalDialogContainer">
    <div class="theory">
          ...
    </div>
</div>

这是一个解释在jQuery中移动DOM元素的链接 http://www.elated.com/articles/jquery-removing-replacing-moving-elements/

2）开始时有2个“理论”div - 一个用于显示“理论”div，当它被“最小化”时，一个将是“theoryDialog”用于将理论div显示为对话框。当用户单击“最大化”时，您将隐藏常规“理论”div并执行 $（“。theoryDiv”）。dialog（）; ，当用户在对话框中单击“最小化”时将销毁\关闭对话框并显示常规的“理论”div。

希望这会有所帮助......

Answer 2

如果您想要像Windows这样的最小化/最大化体验，请尝试我的方法：

https://stackoverflow.com/a/11561470/335514

和小提琴：

http://jsfiddle.net/jasonday/ZSk6L/

带有destroy选项的JQuery UI对话框并返回初始状态

2 个答案: