Question

我有一个基于jQuery UI resizable（版本1.8.24）的小部件，它在显示时立即填充项目，然后可以根据用户的操作再次清除和填充。看起来大致如下：

<div class="dialog ui-resizable">
    <div class="dialog-header">…</div>
    <div class="dialog-contents">…</div>
    <div class="dialog-controls">…</div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000"></div>
    …
</div>

使用以下代码将其强制转换为Resizable：

myDialog.resizable(
            { alsoResize: myDialog.find(".dialog-contents"),
              minHeight: minH,
              minWidth: minW,
              maxHeight: maxH,
              maxWidth: maxW
            }).show().focus();
updateMyDialogContents();

如果小部件未手动调整大小，它会随着div.dialog-contents的内容一起增长和缩小。这是不希望的。但是，如果拖动了任何调整大小的句柄，它会开始表现得像我想要的那样，i。即无论div.dialog-contents内发生什么，都要保持其大小不变。

如何让它从一开始就保持不变？

我注意到_mouseDrag的{{1}}方法将resizable和width设置为DOM元素的height属性中的实际值。通常我会在渲染窗口小部件后立即自己设置style属性，但它在style中有许多内部元素，所以这不起作用。

有没有办法以零坐标增量以编程方式调用alsoResize，以便小部件会认为触发了真正的_mouseDrag事件？如果这是可能的，我将通过在窗口小部件初始化后立即模拟鼠标拖动来解决此问题。

我尝试过像

这样的事情

"mousedrag"

使用不同的事件但没有明显成功（它会抛出错误，因为某些属性似乎总是丢失）。

编辑1 ：jQuery版本。

Answer 1

我已经解决了这个问题：

        var noStretchingHack = function (widget) {
            var contents = widget.find(".dialog-contents");
            var hDiff = widget.height() - contents.height();
            widget.css({width: "600px",
                        height: (400 + hDiff) + "px",
                        top: "0px",
                        left: "0px"});
            contents.css({width: "600px",
                          height: "400px"});
            widget.trigger("resize");
        };

我将它作为回调传递给内容更新程序功能，以便在第一次填充内容后立即执行。我并不为自己感到自豪，如果jQuery UI 1.8.24存在，我很想听听更优雅的解决方案。

jQuery UI可调整大小：如何防止它拉伸？

1 个答案: