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

Question

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

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

防止高度被设定.当只使用东手柄时,是否有更好的方法来防止高度设置？

Answer 1

尝试设置宽高比和手柄属性：

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

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

以下是文档站点http://jqueryui.com/demos/resizes/#option-containment的描述：

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

如果指定为对象，则支持以下键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值应该是一个与可调整大小的子元素匹配的 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' );