0

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

<div class="dialog ui-resizable">
    <div class="dialog-header">…&lt;/div>
    <div class="dialog-contents">…&lt;/div>
    <div class="dialog-controls">…&lt;/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. 这是不希望的。但是，如果拖动了任何调整大小的手柄，它就会开始表现得像我想要的那样，即无论内部发生什么，它都会保持其大小不变div.dialog-contents。

我如何让它从一开始就保持它的大小不变？

我注意到DOM 元素属性中的集合_mouseDrag方法及其实际值。通常我会在渲染小部件后立即自己设置属性，但它有许多内部元素，所以这不起作用。resizablewidthheightstylestylealsoResize

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

我尝试过类似的事情

dlg.data("resizable").
    _mouseDrag(new $.Event("mousedrag",
                           { dragState: "end",
                             dragDeltaT: 0,
                             dragDelta: 0,
                             dragDeltaX: 0,
                             dragDeltaY: 0 }));

不同的事件没有明显的成功（它会引发错误，因为某些属性似乎总是​​丢失）。

编辑 1：jQuery 版本。

4

1 回答 1

0

我已经解决了这个黑客：

        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 中的话。

于 2012-10-11T16:17:26.670 回答