javascript - 在对话框中使用 jQuery Resizable Helper

Question

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

Answer 1

这个答案解释了如何实现你正在寻找的东西。这是一个有效的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 ) 中有一个错误阻止了它的工作。

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