2

我会在可调整大小的 div 上指定不同的最大约束。例如，我希望北方向最大调整大小为 20 像素，南方向最大调整大小为 200 像素。

我可以很容易地用 maxHeight 只在一个方向上完成它，并将手柄限制在一个方向上，但我不能同时管理这两个方向。

这绝对不可能吗？

4

1 回答 1

5

请注意，jQuery 和 jQuery UI 是不一样的。

jQuery UI 可调整大小的小部件为您提供了一组选项。如您所见，其中之一是maxHeight，但也有minHeight。当然还有宽度的等价物。

如果你有一个固定高度的项目（100px），你可以简单地使用这个代码来获得 20px 北和 200px 南：

$("#resizable").resizable(
{
    maxHeight: 300,
    minHeight: 80
});

现在，如果你不知道它的变量 height，你总是可以用 jQuery 找到它：

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20
});

更好的是，如果您希望能够以20px/200px的步长调整它的大小，您可以尝试使用 stop 事件：

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20,
    stop: function(event,ui)
    {
        $("#resizable").resizable("option","maxHeight",parseInt($("#resizable").height(),10)+200);
        $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10)-20);
    }
});

现在，如果你想用两个不同的手柄增加它的高度但有不同的限制，你可以使用手柄的类来强制另一个限制：

var originalHeight = parseInt($("#resizable").height(),10);
$("#resizable").resizable(
{
    maxHeight: originalHeight+20,
    minHeight: originalHeight, // decrease height impossible
    start: function(event,ui)
    {
        if($(event.originalEvent.target).hasClass('ui-resizable-s'))
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+200);
        }
        else
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+20);
        }
    }
});

如果您不想稍后将元素调整为更小，您还可以在停止事件中添加类似的内容：

,
stop: function()
{
    $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10));
}
于 2012-08-17T13:55:21.057 回答