如何使用jQuery UI Resizable水平或垂直调整大小？

Question

我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度.

例:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

但这真的很难看,特别是如果我必须以编程方式更改元素的高度.

Answer 1

您可以将调整大小handles选项设置为仅显示在左侧和右侧(或东/西),如下所示:

foo.resizable({
    handles: 'e, w'
});?

我刚刚发现了这个解决方案的一个警告.当完成内联样式时,它仍然会将宽度和高度放在一起.这给我带来了垂直解决方案的问题.一旦我调整了大小,就会设置宽度,它不再是100%(但是px值).把它放在这里以防其他人正在搜索并遇到它. (7认同)
移位拖动测试失败. (2认同)

Answer 2

虽然海报主要是要求横向调整大小,但问题确实也要求垂直.

垂直情况有一个特殊问题:即使调整浏览器窗口大小,您也可能设置了要保留的相对宽度(例如50%).但是,一旦第一次调整元素大小并且相对宽度丢失,jQuery UI就会在px中设置绝对宽度.

如果找到以下代码适用于此用例:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

非常有趣，谢谢。我会记住的。我认为必须指出，可调整大小的元素必须由css设置其宽度，否则宽度将在调整后丢失。看到这里http://jsfiddle.net/paska/wExtX/10/ (2认同)

Answer 3

非常简单的解决方案:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

这适用于draggable().示例:http://jsfiddle.net/xCepm/

Answer 4

解决方案是配置您的resizable,以便取消您不想要的维度的更改.

这是一个垂直只可调整大小的示例:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});