jQuery可调整大小为每个方向指定不同的最大值

Question

我将在可调整大小的div上指定不同的最大限制。 例如，我想要在北方向调整20px，向南调整200px。

我可以很容易地只用一个方向使用maxHeight，并通过限制一个方向的句柄，但我无法同时管理两者。

这是绝对不可能的吗？

Answer 1

请问，jQuery和jQuery UI是不一样的。

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

如果你有固定高度项目（100像素），你可以简单地使用此代码有20px的北部和200像素南：

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

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

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

更妙的是，如果你想成为能够与步骤 20像素/ 2调整其大小00px，你可以尝试使用停止事件：

$("#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)); 
}