jQuery Resizeable为每个方向指定不同的最大值
我会在可调整大小的div上指定不同的最大约束。 例如,我希望在北方向最大调整为20px,在南方向最大调整为200px 我可以很容易地用maxHeight只对一个方向执行此操作,并将控制柄限制为一个方向,但我无法同时管理这两个方向jQuery Resizeable为每个方向指定不同的最大值,jquery,jquery-ui,resizable,jquery-ui-resizable,Jquery,Jquery Ui,Resizable,Jquery Ui Resizable,我会在可调整大小的div上指定不同的最大约束。 例如,我希望在北方向最大调整为20px,在南方向最大调整为200px 我可以很容易地用maxHeight只对一个方向执行此操作,并将控制柄限制为一个方向,但我无法同时管理这两个方向 这是绝对不可能的吗?请注意,jQuery和jQuery UI不一样 jQuery UI可调整大小小部件为您提供了一组选项。正如您所注意到的,其中一个是maxHeight,但也有minHeight。当然还有宽度的等价物 如果您有一个固定高度的项目(100px),您可以简单
这是绝对不可能的吗?请注意,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);
}
});
现在,如果希望使用两个不同的控制柄增加其高度,但有单独的限制,可以使用控制柄的类强制另一个限制:
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));
}
在我的回答中使用event.originalEvent.target而不是event.src元素。