仅使用 jQuery UI 调整宽度？答案

【问题标题】：Width-only resize with jQuery UI?仅使用 jQuery UI 调整宽度？
【发布时间】：2012-02-22 00:37:46
【问题描述】：

我有一个分为两列的网页。我已经使这些列可调整大小。有没有办法只允许调整宽度而不是高度？另外，当我调整一列的大小时，另一列的宽度应该相应地调整大小。

提供有关我目前如何实现这一目标的信息是： 在第 1 列的“调整大小”事件中，我通过从整个网页宽度中减去第 1 列的宽度来检索第 1 列的宽度并设置第 2 列的宽度。这就是当我调整第一列的大小时第二列相应调整大小的方式。

谁能判断这是否是一种合适的方法？如果没有，请提前提出更好的方法..thanx :)

【问题讨论】：

【解决方案1】：

Resizable widget 有 minHeight 的选项^{[API Ref]} 和 maxHeight^{[API Ref]} >。如果您将它们设置为等于您的视口高度，则只有宽度可以调整大小。

var wndHeight = $(window).height(); // Use whatever height is appropriate
$('#column1').height(wndHeight)
             .resizable({ minHeight: wndHeight, maxHeight: wndHeight });

这是working example。

要调整另一列的大小，您可以使用 resize event of the Resizable widget，类似于您已经使用 stand resize 事件描述的方式。

【讨论】：

【解决方案2】：

您尝试过使用 css 属性的 min-height、max-height、min-width 和 max-width 吗？如果您使用插件，最常见的是这些属性将作为调整元素大小的限制对您起作用

【讨论】：

【解决方案3】：

FishBasketGordo 的回答由于某种原因对我不起作用。我能够通过使用 ResizableWidget 的 resize^{[API Ref]} 事件来解决问题。以下示例假设您正在调整 #target_div 的大小，并且您希望 #target_div 保持相同的高度（以像素为单位）。

var targetHeight = $('#target_div').height(); // Get the height of the object.  This can be done when the window loads.
$('#target_div').resizable({
  resize: function(event, ui) {
    ui.element.css('height', targetHeight);
  },
});

【讨论】：