我会在可调整大小的 div 上指定不同的最大约束。 例如,我希望北方向的最大调整大小为 20px,南方向的最大调整大小为 200px。
我可以轻松地使用 maxHeight 并通过将 handle 限制为一个方向来仅在一个方向上完成此操作,但我无法同时管理这两个方向。
这绝对不可能吗?
最佳答案
请注意,jQuery 和 jQuery UI 不一样。
jQuery UI 可调整大小的小部件为您提供了一组选项。正如您所注意到的,其中之一是 maxHeight,但还有 minHeight。当然还有宽度的等价物。
如果您有一个固定高度项目 (100px),您可以简单地使用此代码将北边设置为 20px,南边设置为 200px:
$("#resizable").resizable(
{
maxHeight: 300,
minHeight: 80
});
现在,如果您不知道它的可变高度,您可以随时使用 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);
}
});
现在,如果您想使用两个不同的 handle 增加其高度但有单独的限制,您可以使用 handle 的类来强制另一个限制:
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));
}
关于jQuery 可调整大小为每个方向指定不同的最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12006968/