Question

如何在Helper上使用jQuery Resizable中的Dialog功能（仅在容器调整大小时显示框架）？

Answer 1

This answer解释了如何实现您的目标。这是一个有效的jsFiddle。

答案有一个缺陷：如果缩小，则调整大小句柄会在对话框下方。这是通过z-index: 10000 !important;解决的。这里链接的jsFiddle包括修复。

<强> HTML：

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<强> CSS：

.ui-resizable-helper {
    border: 2px dotted #00F;
    z-index: 10000 !important;
}

<强> JavaScript的：

$("#dialog").dialog().dialog('widget').resizable('destroy').resizable({
    helper: "ui-resizable-helper"
});

Answer 2

根据这个 - http://forum.jquery.com/topic/specify-drag-and-resize-option-for-dialogs，应该可以这样做：

dlg.dialog('widget').resizable('option','helper','ui-resizable-helper')

但不幸的是，jQueryUI（http://bugs.jqueryui.com/ticket/6723）中存在一个阻止此工作的错误。

一种可能的解决方案是使用jQueryUI resizable而不是dialog。取决于您对dialog功能的依赖程度。

在对话框上使用jQuery Resizable Helper

2 个答案: