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)); 
}