jQuery UI 可调整大小：单独使用东手柄时的自动高度

Posted 2023-05-07

【中文标题】jQuery UI 可调整大小：单独使用东手柄时的自动高度

【英文标题】：jQuery UI resizable : auto height when using east handle alone

【发布时间】：2011-02-07 18:12:47

【问题描述】：

我有一个 jqueryui 可重新调整大小的 div。我只希望宽度可以重新调整大小，高度保持自动，以便 div 随内容增长或缩小。如果我将其设置为仅显示东手柄并使用 css height:auto，则在调整大小后，即使仅更改了宽度，也会设置高度。我每次都必须将高度设置为自动调整大小事件，如下所示：

resize: function(event, ui) 
    $(this).css('height', 'auto');

防止设置高度。仅使用东手柄时，有没有更好的方法来防止设置高度？

【问题讨论】：

我同意你的建议...

【参考方案1】：

尝试设置纵横比和句柄属性：

    $( "#resizable" ).resizable(
        aspectRatio: 16 / 9,
                    handles: 'e'
    );

上面将创建一个容器，该容器将自动调整大小为 16/9 的纵横比，仅在容器的东侧有一个句柄。

这是来自http://jqueryui.com/demos/resizable/#option-containment 的文档站点的描述：

如果指定为字符串，则应为以下任何一项的逗号拆分列表：'n, e, s, w, ne, se, sw, nw, all'。必要的句柄将由插件自动生成。

如果指定为对象，则支持以下键： n, e, s, w, ne, se, sw, nw 。 any 指定的值应该是一个 jQuery 选择器，它与可调整大小的子元素匹配以用作该句柄。如果句柄不是可调整大小的子对象，则可以直接传入 DOMElement 或有效的 jQuery 对象。

代码示例

使用指定的句柄选项初始化可调整大小的对象。

$( ".selector" ).resizable( handles: 'n, e, s, w' );

在初始化之后获取或设置句柄选项。

//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );