在对话框上使用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"
});